simulation-front/src/views/workManagement/components/threeProjectInfo.vue

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

<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import {
    showFullScreenLoading,
    tryHideFullScreenLoading,
} from "../../../axios/filter";
import { mapState } from "vuex";

export default {
    name: "threeProjectInfo", // 项目详情中的threeJS
    components: {},

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

    computed: {
        ...mapState(["scale"]),
        // 坐标换算倍数
        rate() {
            return 40 / this.scale;
        },
    },

    props: {
        carModel: {
            type: String,
            default: "",
        },
        // configList: {
        //     type: Object,
        //     default: {
        //         camera: [],
        //         ogt: [],
        //         lidar: [],
        //         gps: [],
        //     },
        // },
    },

    watch: {
        carModel(newVal, oldVal) {
            if (newVal && newVal != oldVal) {
                this.initCar(newVal);
            }
        },
        // configList(newVal, oldVal) {
        // newVal, oldVal都没有值
        //     if (newVal && newVal != oldVal) {
        //         if (
        //             newVal.camera.length > 0 ||
        //             newVal.ogt.length > 0 ||
        //             newVal.lidar.length > 0 ||
        //             newVal.gps.length > 0
        //         ) {
        //             this.showAll();
        //         }
        //     }
        // },
    },

    methods: {
        // 场景
        initScene() {
            this.scene = new THREE.Scene();
            let axes = new THREE.AxesHelper(1500);
            this.scene.add(axes);
            const gridHelper = new THREE.GridHelper(1000, 100);
            gridHelper.material.opacity = 0.25;
            gridHelper.material.transparent = true;
            this.scene.add(gridHelper);
        },
        // 相机
        initCamera() {
            this.camera = new THREE.PerspectiveCamera(
                75,
                this.container.clientWidth / this.container.clientHeight,
                0.1,
                1000
            );
            this.camera.position.set(200, 200, 200);
            this.scene.add(this.camera);
        },
        // 渲染器
        initRenderer() {
            this.renderer = new THREE.WebGLRenderer({
                antialias: true,
                alpha: true,
            });
            this.renderer.setSize(
                this.container.clientWidth,
                this.container.clientHeight
            );
            this.renderer.setClearColor("#272727");
            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 dirLight = new THREE.DirectionalLight(0xffffff, 0.5);
            this.scene.add(dirLight);
        },
        // 初始化模型
        initContent(r, position, rotation, type) {
            var cubeGeometry = new THREE.ConeGeometry(
                r || 45 * this.scale,
                150 * this.scale,
                4,
                1,
                false
            );
            cubeGeometry.translate(0, -75 * this.scale, 0);

            let obj = {
                color: 0x4c4c4c,
                transparent: true,
                opacity: 0.3,
                lightMapIntensity: 0.1,
            };

            if (type === "camera") {
                obj.emissive = 0x0000ff;
            } else if (type === "ogt") {
                obj.emissive = 0x008000;
            } else if (type === "lidar") {
                obj.emissive = 0xff4500;
            } else if (type === "gps") {
                obj.emissive = 0x8a2be2;
            }

            var cubeMaterial = new THREE.MeshLambertMaterial(obj);
            this.cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            this.cube.name = this.geometryName || "cube";

            if (position) {
                this.cube.position.x = position.x;
                this.cube.position.y = position.y;
                this.cube.position.z = position.z;
            }

            if (rotation) {
                this.cube.rotateX(rotation.x);
                this.cube.rotateY(rotation.y);
                this.cube.rotateZ(rotation.z);
            }

            this.scene.add(this.cube);

            if (this.transformControls) {
                this.transformControls.attach(this.cube);
            }
        },
        initCar0(model) {
            if (this.car) {
                this.scene.remove(this.car);
                this.removeObj(this.car);
                this.car = null;
            }

            showFullScreenLoading();

            var that = this;
            var loader = new GLTFLoader(); //创建一个FBX加载器

            loader.load(
                model,
                function (obj) {
                    tryHideFullScreenLoading();

                    obj.scene.rotation.set(
                        (-90 * Math.PI) / 180,
                        0,
                        (-180 * Math.PI) / 180
                    );

                    let scale = 30 * that.scale;
                    obj.scene.scale.set(scale, scale, scale);

                    that.scene.add(obj.scene);
                    that.car = obj.scene;
                },
                (xhr) => {
                    // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                },
                (error) => {
                    tryHideFullScreenLoading();
                    console.error(error);
                }
            );
        },
        // 初始化车模型
        initCar(model) {
            if (!model) return;
            if (!model.includes(".glb")) return;

            this.initCar0(model);
        },
        // 初始化
        init() {
            this.initScene();
            this.initCamera();
            this.initRenderer();
            this.initLight();

            this.controls = new OrbitControls(
                this.camera,
                this.renderer.domElement
            ); //创建控件对象
            this.controls.minDistance = 30;
            this.controls.maxDistance = 600;
            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();
        },
        onWindowResize() {
            this.camera.aspect =
                this.container.clientWidth / this.container.clientHeight;
            this.camera.updateProjectionMatrix();
            this.renderer.setSize(
                this.container.clientWidth,
                this.container.clientHeight
            );
        },
        go() {
            this.container = document.getElementById(
                "containerThreeProjectInfo"
            );
            this.init();
            this.animate();

            window.addEventListener("resize", this.onWindowResize);
        },
        // 每编辑一个传感器则重新生成对应的物体
        reset(type) {
            this.canDrag = true;

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

            this.sensor = null;

            const obj1 = this.scene.getObjectByName("cube");
            if (obj1) {
                this.scene.remove(obj1);
            }

            this.xAngle = 0;
            this.yAngle = 0;
            this.zAngle = 0;

            let z = +this.$parent.formA.sensorX || 0;
            let x = +this.$parent.formA.sensorY || 0;
            let y = +this.$parent.formA.sensorZ || 0;
            let h = +this.$parent.formA.sensorP || 0;
            let p = +this.$parent.formA.sensorR || 0;
            let r = +this.$parent.formA.sensorH || 0;

            this.initContent(
                null,
                { x, y, z },
                {
                    x: (-90 * Math.PI) / 180,
                    y: 0,
                    z: 0,
                },
                type
            );

            setTimeout(() => {
                this.initSensor({ x, y, z }, type, true);

                const obj = this.scene.getObjectByName("cube");

                obj.position.x = x;
                obj.position.y = y;
                obj.position.z = z;

                this.xAngle = ((h - 90) * Math.PI) / 180;

                this.yAngle = (p * Math.PI) / 180;

                this.zAngle = (r * Math.PI) / 180;
                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
            }, 0);
        },
        // 初始化传感器
        initSensor(
            pos = { x: 0, y: 0, z: 0 },
            type = "camera",
            canMove = false
        ) {
            let Loader = new MTLLoader(); //材质文件加载器
            let loader = new OBJLoader(); //obj加载器
            let that = this;
            let mtlUrl = "";
            let objUrl = "";

            if (type === "camera") {
                mtlUrl = `${that.publicPath}sensor/camera/camera.mtl`;
                objUrl = `${that.publicPath}sensor/camera/camera.obj`;
            } else if (type === "ogt") {
                mtlUrl = `${that.publicPath}sensor/ogt/millimeter_wave_radar.mtl`;
                objUrl = `${that.publicPath}sensor/ogt/millimeter_wave_radar.obj`;
            } else if (type === "lidar") {
                mtlUrl = `${that.publicPath}sensor/lidar/LIDAR.mtl`;
                objUrl = `${that.publicPath}sensor/lidar/LIDAR.obj`;
            } else if (type === "gps") {
                mtlUrl = `${that.publicPath}sensor/gps/lidar.mtl`;
                objUrl = `${that.publicPath}sensor/gps/lidar.obj`;
            }

            if (type === "ogt") {
                showFullScreenLoading();
            }

            Loader.load(
                mtlUrl,
                function (materials) {
                    loader.setMaterials(materials);
                    loader.load(objUrl, function (obj) {
                        if (type === "ogt") {
                            tryHideFullScreenLoading();
                        }

                        that.cacheList.push(obj);
                        for (let i = 0; i < obj.children.length; i++) {
                            if (type === "camera") {
                                obj.children[i].scale.set(0.8, 0.8, 0.8);
                            } else if (type === "ogt") {
                                obj.children[i].scale.set(0.2, 0.2, 0.2);
                            } else if (type === "lidar") {
                                obj.children[i].scale.set(0.1, 0.1, 0.1);
                            } else if (type === "gps") {
                                obj.children[i].scale.set(40, 40, 40);
                            }
                        }
                        obj.position.set(pos.x, pos.y, pos.z);

                        if (canMove) {
                            that.sensor = obj;
                        }

                        that.scene.add(obj); //返回的组对象插入场景中
                    });
                },
                (xhr) => {
                    // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                },
                (error) => {
                    if (type === "ogt") {
                        tryHideFullScreenLoading();
                    }
                    console.error(error);
                }
            );
        },
        // 初始化已保存过的传感器
        initContentToShow(r, position, rotation, type) {
            var cubeGeometry = new THREE.ConeGeometry(
                r || 45 * this.scale,
                150 * this.scale,
                4,
                1,
                false
            );
            cubeGeometry.translate(0, -75 * this.scale, 0);

            let obj = {
                transparent: true,
                opacity: 0.3,
                lightMapIntensity: 0.1,
                color: 0x4c4c4c,
            };

            if (type === "camera") {
                obj.emissive = 0x000080;
            } else if (type === "ogt") {
                obj.emissive = 0x008000;
            } else if (type === "lidar") {
                obj.emissive = 0xff4500;
            } else if (type === "gps") {
                obj.emissive = 0x8a2be2;
            }

            var cubeMaterial = new THREE.MeshLambertMaterial(obj);

            var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
            cube.name = this.geometryName || "cubeA";
            cube.rotateX((-90 * Math.PI) / 180);

            if (position) {
                cube.position.x = position.x;
                cube.position.y = position.y;
                cube.position.z = position.z;
            }
            if (rotation) {
                cube.rotation.set(
                    ((rotation.x - 90) * Math.PI) / 180,
                    (rotation.y * Math.PI) / 180,
                    (rotation.z * Math.PI) / 180
                );
            }
            this.cacheList.push(cube);
            this.scene.add(cube);
        },
        // 生成一种类型的全部显示器
        showSensor(sensor, type) {
            if (sensor && Array.isArray(sensor) && sensor.length > 0) {
                sensor.forEach((item) => {
                    this.initContentToShow(
                        null,
                        {
                            z: Math.floor(item.sensorX / this.rate || 0),
                            x: Math.floor(item.sensorY / this.rate || 0),
                            y: Math.floor(item.sensorZ / this.rate || 0),
                        },
                        {
                            x: +item.sensorP,
                            y: +item.sensorR,
                            z: +item.sensorH,
                        },
                        type
                    );

                    this.initSensor(
                        {
                            z: Math.floor(item.sensorX / this.rate || 0),
                            x: Math.floor(item.sensorY / this.rate || 0),
                            y: Math.floor(item.sensorZ / this.rate || 0),
                        },
                        type,
                        false
                    );
                });
            }
        },
        // 显示全部
        showAll(configList) {
            // 避免重复加载所有传感器
            if (!this.canDrag) return;

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

            const obj = this.scene.getObjectByName("cube");
            if (obj) {
                this.scene.remove(obj);
            }

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

            if (this.transformControls) {
                this.transformControls.detach();
            }

            this.showSensor(configList.camera, "camera");
            this.showSensor(configList.ogt, "ogt");
            this.showSensor(configList.lidar, "lidar");
            this.showSensor(configList.gps, "gps");
        },
        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.cacheList = [];
        }

        this.clearScene();

        this.scene = null;
        this.camera = 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>
#containerThreeProjectInfo {
    width: 100%;
    height: calc(100vh - 125px);
}
</style>