<template>
    <div>
        <div id="container66"></div>
    </div>
</template>

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { mapState } from "vuex";
import CoordinateAxes from "../common/coordinateAxes";

export default {
    name: "threeAxesHelper", // 车辆配置详情中的axesHelperBox
    components: {},

    data() {
        return {
            publicPath: process.env.BASE_URL,
            scene: null,
            scene2: null,
            camera: null,
            camera2: null,
            renderer: null,
            light: null,
            transformControls: null,
            geometryName: null,
            controls: null,
            mesh: null,
            cube: null,
            cacheList: [],
            xAngle: 0,
            yAngle: 0,
            zAngle: 0,
            container: null,
            car: null,
            cubeTexture: null,
            raf: null,
            canDrag: true, // 是否可移动
            dragControls: null,
            sensor: null, // 当前操作的传感器配置
            ogt: null,
            // scale: 2, // 物体加载换算倍数
            // rate: 20, // 坐标换算倍数
        };
    },

    computed: {
        ...mapState(["scale"]),
    },

    props: {
        controlsCanMove: {
            type: Boolean,
            default: true,
        },
    },

    watch: {
        controlsCanMove(newVal, oldVal) {
            if (this.controls) this.controls.enabled = newVal;
        },
    },

    methods: {
        // 场景
        initScene() {
            this.scene = new THREE.Scene();
            let cube = new CoordinateAxes();
            this.scene.add(cube);
        },
        // 相机
        initCamera() {
            /* this.camera = new THREE.OrthographicCamera(
                this.container.clientWidth / -2,
                this.container.clientWidth / 2,
                this.container.clientHeight / 2,
                this.container.clientHeight / -2,
                1,
                // 0.1,
                1000
            ); */

            this.camera = new THREE.PerspectiveCamera(
                75,
                this.container.clientWidth / this.container.clientHeight,
                0.1,
                1000
            );

            // this.camera = new THREE.PerspectiveCamera(45, 1.5, 1, 1000);
            // this.camera.position.set(600, 600, 600);
            this.camera.position.set(200, 200, 200);
            // this.camera.lookAt(this.scene.position);
            // this.scene.add(this.camera);
            // this.scene.add(this.camera2);

            this.camera2 = new THREE.PerspectiveCamera(75, 1, 0.1, 1000);
            // this.camera2 = new THREE.PerspectiveCamera(40, 1, 1, 1000);
            // this.camera2.position.copy(this.camera.position);
            // this.camera.layers.set(1);
        },
        // 渲染器
        initRenderer() {
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
            });
            this.renderer.setSize(
                this.container.clientWidth,
                this.container.clientHeight
            );
            this.container.appendChild(this.renderer.domElement);
        },
        // 初始化灯光
        initLight() {
            var hemiLight = new THREE.HemisphereLight(0xffffff, 0x444444);
            hemiLight.position.set(0, 20, 0);
            this.scene.add(hemiLight);

            // 环境光会均匀的照亮场景中的所有物体
            const light = new THREE.AmbientLight(0x5c5c5c, 0.4); // soft white light
            this.scene.add(light);

            // 点光源
            // const light1 = new THREE.PointLight(0xffffff, 2, 100);
            // light1.position.set(0, 0, -100);
            // this.scene.add(light1);

            // 平行光是沿着特定方向发射的光
            const dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
            // const dirLight = new THREE.DirectionalLight(0xffffff);
            // dirLight.position.set(0, 200, 100);
            // dirLight.castShadow = true;
            // dirLight.shadow.camera.top = 180;
            // dirLight.shadow.camera.bottom = -100;
            // dirLight.shadow.camera.left = -120;
            // dirLight.shadow.camera.right = 120;

            // dirLight.shadow.camera.near = 0.01;
            // dirLight.shadow.camera.far = 60;
            // dirLight.shadow.camera.top = 22;
            // dirLight.shadow.camera.bottom = -22;
            // dirLight.shadow.camera.left = -35;
            // dirLight.shadow.camera.right = 35;
            // // //设置阴影分辨率
            // dirLight.shadow.mapSize.width = 2048; // default
            // dirLight.shadow.mapSize.height = 2048; // default
            // //阴影限制
            // dirLight.shadow.radius = 1;
            // this.scene.add(dirLight);

            // const spotLight = new THREE.SpotLight(0xffffff);
            // spotLight.position.set(100, 1000, 100);

            // spotLight.castShadow = true;

            // spotLight.shadow.mapSize.width = 1024;
            // spotLight.shadow.mapSize.height = 1024;

            // spotLight.shadow.camera.near = 500;
            // spotLight.shadow.camera.far = 4000;
            // spotLight.shadow.camera.fov = 30;

            // this.scene.add(spotLight);
        },
        // 初始化
        init() {
            this.initScene();
            this.initCamera();
            this.initRenderer();
            this.initLight();

            //创建控件对象
            this.controls = new OrbitControls(
                this.camera,
                // this.renderer.domElement
                document.getElementById("container")
            );

            this.controls.minDistance = 30;
            this.controls.maxDistance = 600;

            this.controls.enableZoom = false;

            this.controls.update();
        },
        animate() {
            this.raf = requestAnimationFrame(this.animate);
            // this.renderer.render(this.scene, this.camera);
            if (this.transformControls) {
                this.transformControls.update();
            }

            this.controls.update();

            this.renderer.render(this.scene, this.camera);
        },
        onWindowResize() {
            this.camera.aspect =
                this.container.clientWidth / this.container.clientHeight;
            this.camera.updateProjectionMatrix();

            this.renderer.setSize(
                this.container.clientWidth,
                this.container.clientHeight
            );

            let insetWidth = this.container.clientWidth / 6; // square
            let insetHeight = this.container.clientHeight / 6;

            this.camera2.aspect = insetWidth / insetHeight;
            this.camera2.updateProjectionMatrix();
        },
        go() {
            this.container = document.getElementById("container66");
            this.init();
            this.animate();

            window.addEventListener("resize", this.onWindowResize);
        },
        removeScene() {
            this.clearScene();
        },
        clearCache(item) {
            if (item.geometry && item.geometry.dispose) item.geometry.dispose();
            if (item.material && item.material.dispose) item.material.dispose();
        },
        clearScene() {
            this.removeObj(this.scene);
        },
        removeObj(obj) {
            let arr = obj.children.filter((x) => x);
            arr.forEach((item) => {
                if (item.children.length) {
                    this.removeObj(item);
                } else {
                    this.clearCache(item);
                    item.clear();
                }
            }),
                obj.clear();
            arr = null;
        },
    },

    mounted() {
        this.go();
    },

    destroyed() {
        window.removeEventListener("resize", this.onWindowResize);
        cancelAnimationFrame(this.raf);

        if (this.renderer) {
            this.renderer.renderLists.dispose();
            this.renderer.dispose();
            this.renderer.forceContextLoss();
            this.renderer.domElement = null;
            this.renderer.content = null;
            this.renderer = null;
        }

        if (this.dragControls) {
            this.dragControls.deactivate();
            this.dragControls.dispose();
            this.dragControls = null;
        }

        if (this.controls) {
            this.controls.dispose();
            this.controls = null;
        }

        if (this.transformControls) {
            this.transformControls.detach();
            this.transformControls.dispose();
            this.transformControls = null;
        }

        if (this.cacheList.length > 0) {
            // this.scene.remove(...this.cacheList);
            this.cacheList = [];
        }

        this.clearScene();

        this.scene = null;
        this.scene2 = null;
        this.camera = null;
        this.camera2 = null;
        this.light = null;
        this.geometryName = null;
        this.mesh = null;
        this.cube = null;
        this.container = null;
        this.car = null;
        this.cubeTexture = null;
        this.raf = null;

        THREE.Cache.clear();
    },
};
</script>

<style lang="less" scoped>
#container66 {
    width: 100%;
    height: 150px;
}
</style>
