<template>
    <div class="mode">
        <canvas ref="three"></canvas>
    </div>
</template>

<script>
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { FBXLoader } from 'three/examples/jsm/loaders/FBXLoader.js';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
export default {
    props: {
        info: {
            type: Object,
            default: () => {
                return {};
            }
        }
    },
    data() {
        return {
            scene: null,
            light: null,
            camera: null,
            renderer: null,
            controls: null,
            mesh: null,
            angularSpeed: 0.2,
            lastTime: 0,
            farmeCount: 0
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            const scene = new THREE.Scene();
            // scene.background = new THREE.Color('#fff');
            const canvas = this.$refs.three;
            const renderer = new THREE.WebGLRenderer({ canvas, antialias: true, alpha: true });
            const camera = new THREE.PerspectiveCamera(45, canvas.innerWidth / canvas.innerHeight, 0.1, 1000);
            renderer.setSize(canvas.innerWidth, canvas.innerHeight);
            camera.position.z = 150;
            this.scene = scene;
            this.camera = camera;
            this.renderer = renderer;
            const fbxLoader = new FBXLoader();
            var mesh = null;
            // const axesHelper = new THREE.AxesHelper(50);
            // scene.add(axesHelper);
            fbxLoader.load(this.info.url || 'https://raex-meta.oss-cn-shenzhen.aliyuncs.com/01.fbx', fbx => {
                console.log(fbx);
                mesh = fbx;
                mesh.scale.multiplyScalar(0.45);
                // mesh.position.y = -40;
                // mesh.traverse(o => {
                //     //将图片作为纹理加载
                //     let explosionTexture = new THREE.TextureLoader().load(
                //         'https://zhirongip.oss-cn-hangzhou.aliyuncs.com/matilda/textures/color.2.1001.png'
                //     );
                //     //调整纹理图的方向
                //     explosionTexture.flipY = true;
                //     //将纹理图生成基础网格材质(MeshBasicMaterial)
                //     const material = new THREE.MeshBasicMaterial({
                //         map: explosionTexture
                //     });
                //     //给模型每部分上材质
                //     o.material = material;
                // });
                scene.add(fbx);
            });
            // const controls = new OrbitControls(camera, renderer.domElement);
            // controls.enableDamping = true;
            const clock = new THREE.Clock();
            function animate() {
                // controls.update();
                renderer.render(scene, camera);
                requestAnimationFrame(animate);

                const time = Date.now() * 0.0005;
                const delta = clock.getDelta();

                if (mesh) mesh.rotation.y -= 0.5 * delta;

                //添加下面代码
                if (resizeRendererToDisplaySize(renderer)) {
                    const canvas = renderer.domElement;
                    camera.aspect = canvas.clientWidth / canvas.clientHeight;
                    camera.updateProjectionMatrix();
                }
            }
            animate();

            function resizeRendererToDisplaySize(renderer) {
                const canvas = renderer.domElement;
                var width = window.innerWidth;
                var height = window.innerHeight;
                var canvasPixelWidth = canvas.width / window.devicePixelRatio;
                var canvasPixelHeight = canvas.height / window.devicePixelRatio;

                const needResize = canvasPixelWidth !== width || canvasPixelHeight !== height;
                if (needResize) {
                    renderer.setSize(width, height, false);
                }
                return needResize;
            }
        },
        rorateAnimate() {}
        // init() {
        //     this.scene = new THREE.Scene();
        //     this.scene.add(new THREE.AmbientLight(0x404040, 6)); //环境光
        //     this.light = new THREE.DirectionalLight(0xdfebff, 0.45); //从正上方（不是位置）照射过来的平行光，0.45的强度
        //     this.light.position.set(50, 200, 100);
        //     this.light.position.multiplyScalar(0.3);
        //     this.scene.add(this.light);
        //     /**
        //      * 相机设置
        //      */
        //     let container = this.$refs.three; //显示3D模型的容器
        //     this.camera = new THREE.PerspectiveCamera(70, container.clientWidth / container.clientHeight, 0.01, 10);
        //     this.camera.position.z = 1;
        //     /**
        //      * 创建渲染器对象
        //      */
        //     this.renderer = new THREE.WebGLRenderer({ alpha: true });
        //     this.renderer.setSize(container.clientWidth, container.clientHeight);
        //     container.appendChild(this.renderer.domElement);
        //     //创建控件对象
        //     this.controls = new OrbitControls(this.camera, this.renderer.domElement);
        // },
        // loadFbx() {
        //     let self = this;
        //     let fbxLoader = new FBXLoader();
        //     //load一个测试模型路径：public/model/zhuozi2.gltf
        //     fbxLoader.load('https://zhirongip.oss-cn-hangzhou.aliyuncs.com/cs_xong.FBX', function (fbx) {
        //         self.isLoading = false; //关闭载入中效果
        //         self.mesh = fbx;
        //         // self.mesh.scale.set(0.4, 0.4, 0.4); //设置大小比例
        //         // self.mesh.position.set(0, 0, 0); //设置位置
        //         self.scene.add(self.mesh); // 将模型引入three、
        //         self.animate();
        //     });
        // },
        // animate() {
        //     if (this.mesh) {
        //         requestAnimationFrame(this.animate);

        //         // this.mesh.rotation.x += 0.01;
        //         this.mesh.rotation.y += 0.004;
        //         this.renderer.render(this.scene, this.camera);
        //     }
        // }
    }
};
</script>

<style lang="less" scoped>
.mode {
    canvas {
        width: 100vw;
        height: 100vw;
    }
}
</style>
