文件名更换

src/views/modelLibrary/components/online.vue

@@ -1,1420 +0,0 @@
-<template>
-    <div>
-        <div id="container"></div>
-    </div>
-</template>
-
-<script>
-import * as THREE from "three";
-import { TransformControls } from "three/examples/jsm/controls/TransformControls.js";
-import { DragControls } from "three/examples/jsm/controls/DragControls.js";
-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 { FBXLoader } from "three/examples/jsm/loaders/FBXLoader.js";
-// import { DDSLoader } from "three/examples/jsm/loaders/DDSLoader.js";
-import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
-import { ConvexGeometry } from "three/examples/jsm/geometries/ConvexGeometry.js";
-import {
-    showFullScreenLoading,
-    tryHideFullScreenLoading,
-} from "../../../axios/filter";
-import { mapState } from "vuex";
-
-export default {
-    name: "threeVehicleConfiguration", // 车辆配置详情中的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: [],
-            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"]),
-        // 坐标换算倍数
-        rate() {
-            return 40 / this.scale;
-        },
-    },
-
-    props: {
-        xValue: {
-            type: Number,
-            default: 0,
-        },
-        yValue: {
-            type: Number,
-            default: 0,
-        },
-        zValue: {
-            type: Number,
-            default: 0,
-        },
-        hValue: {
-            type: Number,
-            default: 0,
-        },
-        pValue: {
-            type: Number,
-            default: 0,
-        },
-        rValue: {
-            type: Number,
-            default: 0,
-        },
-        carModel: {
-            type: String,
-            default: "",
-        },
-        isAdd: {
-            type: Boolean,
-            default: false,
-        },
-        configList: {
-            default: {},
-            type: Object,
-        },
-    },
-
-    watch: {
-        xValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) obj.position.x = newVal || 0;
-
-            if (this.sensor) this.sensor.position.x = newVal || 0;
-        },
-        yValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) obj.position.y = newVal || 0;
-
-            if (this.sensor) this.sensor.position.y = newVal || 0;
-        },
-        zValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) obj.position.z = newVal || 0;
-
-            if (this.sensor) this.sensor.position.z = newVal || 0;
-        },
-        hValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            let value = (newVal || 0) - 90;
-            value = (value * Math.PI) / 180;
-            this.xAngle = value;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) {
-                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
-            }
-
-            // obj.rotateX(this.xAngle * -1);
-            // obj.rotateX(value);
-
-            // obj.rotation.x += value;
-            // var axis = new THREE.Vector3(0, 1, 0); //向量axis
-            // obj.rotateOnAxis(axis, value); //绕axis轴旋转π/8
-        },
-        pValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            let value = newVal || 0;
-            value = (value * Math.PI) / 180;
-            this.yAngle = value;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) {
-                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
-            }
-        },
-        rValue(newVal, oldVal) {
-            if (newVal === oldVal) return;
-
-            let value = newVal || 0;
-            value = (value * Math.PI) / 180;
-            this.zAngle = value;
-
-            const obj = this.scene.getObjectByName("cube");
-            if (obj) {
-                obj.rotation.set(this.xAngle, this.yAngle, this.zAngle);
-            }
-        },
-        carModel(newVal, oldVal) {
-            if (newVal && newVal != oldVal) {
-                this.initCar(newVal);
-            }
-        },
-    },
-
-    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);
-
-            // const geometry = new THREE.BoxGeometry(100, 100, 100);
-            // const material = new THREE.MeshBasicMaterial({
-            //     color: 0xffffff,
-            //     opacity: 0.3,
-            //     transparent: true,
-            // });
-            // geometry.translate(100, 100, 100);
-            // const cube = new THREE.Mesh(geometry, material);
-            // this.scene.add(cube);
-
-            // let geometry = new THREE.BoxGeometry(10, 10, 10, 2, 2, 2);
-            // let material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
-            // let object = new THREE.Mesh(geometry, material);
-            // let edges = new THREE.VertexNormalsHelper(object, 2, 0x00ff00, 1);
-            // this.scene.add(object);
-            // this.scene.add(edges);
-
-            const genCubeUrls = function (prefix, postfix) {
-                return [
-                    prefix + "px" + postfix,
-                    prefix + "nx" + postfix,
-                    prefix + "py" + postfix,
-                    prefix + "ny" + postfix,
-                    prefix + "pz" + postfix,
-                    prefix + "nz" + postfix,
-                ];
-            };
-
-            const urls = genCubeUrls(`${this.publicPath}Park3Med/`, ".jpg");
-            // const urls = genCubeUrls(`${this.publicPath}6/`, ".png");
-
-            const cubeTextureLoader = new THREE.CubeTextureLoader();
-            const environmentMapTexture = cubeTextureLoader.load(urls);
-
-            // this.scene.background = environmentMapTexture;
-        },
-        // 相机
-        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.layers.set(1);
-
-            // 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);
-        },
-        // 渲染器
-        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 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);
-        },
-        initTransform() {
-            // 添加平移控件
-            this.transformControls = new TransformControls(
-                this.camera,
-                this.renderer.domElement
-            );
-            this.transformControls.setMode("translate");
-            // 可能的值有"world" 和 "local"
-            this.transformControls.setSpace("world");
-            this.transformControls.addEventListener("objectChange", (e) => {
-                // console.log(e.target.object);
-                // this.$emit(
-                //     "posChange",
-                //     ((e.target.object.rotation.x * 360) / Math.PI) >> 0,
-                //     "h"
-                // );
-                if (!this.canDrag) return;
-                this.$emit(
-                    "posChange",
-                    (e.target.object.position.x + 0.5) >> 0,
-                    "x"
-                );
-                this.$emit(
-                    "posChange",
-                    (e.target.object.position.y + 0.5) >> 0,
-                    "y"
-                );
-                this.$emit(
-                    "posChange",
-                    (e.target.object.position.z + 0.5) >> 0,
-                    "z"
-                );
-            });
-            this.transformControls.addEventListener("mouseDown", (e) => {
-                this.controls.enabled = false;
-            });
-            this.transformControls.addEventListener("mouseUp", (e) => {
-                this.controls.enabled = true;
-            });
-            this.scene.add(this.transformControls);
-        },
-        // 初始化模型
-        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,
-                // wireframe: true,
-                transparent: true,
-                opacity: 0.3,
-                // ambient: 0x00ff00,
-                // emissive: 0xfaff72,
-                lightMapIntensity: 0.1,
-                // emissiveIntensity: 0.1,
-                // envMap: this.cubeTexture,
-                // side: THREE.DoubleSide,
-                // side: 2,
-            };
-
-            if (type === "camera") {
-                obj.emissive = 0x0000ff;
-                // obj.emissive = 0x000080;
-            } else if (type === "ogt") {
-                // obj.emissive = 0x228B22;
-                // obj.emissive = 0x006400;
-                obj.emissive = 0x008000;
-            } else if (type === "lidar") {
-                // obj.emissive = 0xff0000;
-                // obj.emissive = 0xE6A23C;
-                obj.emissive = 0xff4500;
-            } else if (type === "gps") {
-                // obj.emissive = 0xfaff72;
-                // obj.emissive = 0x9400D3;
-                obj.emissive = 0x8a2be2;
-            }
-
-            // var cubeMaterial = new THREE.MeshBasicMaterial(obj);
-            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);
-            }
-        },
-        // 添加拖拽控件
-        initDragControls() {
-            // 过滤不是 Mesh 的物体,例如辅助网格
-            var objects = [];
-            for (let i = 0; i < this.scene.children.length; i++) {
-                if (this.scene.children[i].isMesh) {
-                    objects.push(this.scene.children[i]);
-                }
-            }
-
-            if (this.dragControls) {
-                this.dragControls.deactivate();
-                this.dragControls.dispose();
-                this.dragControls = null;
-            }
-
-            // 初始化拖拽控件
-            this.dragControls = new DragControls(
-                objects,
-                this.camera,
-                this.renderer.domElement
-            );
-
-            // 鼠标略过事件
-            // this.dragControls.addEventListener("hoveron", (event) => {
-            //     // 让变换控件对象和选中的对象绑定
-            //     this.transformControls.attach(event.object);
-            // });
-
-            this.dragControls.addEventListener("drag", (e) => {
-                if (!this.canDrag) return;
-                // this.$emit("posChange", (e.object.position.x + 0.5) >> 0, "x");
-                // this.$emit("posChange", (e.object.position.y + 0.5) >> 0, "y");
-                // this.$emit("posChange", (e.object.position.z + 0.5) >> 0, "z");
-            });
-            this.dragControls.addEventListener("dragstart", (e) => {
-                this.controls.enabled = false;
-            });
-            this.dragControls.addEventListener("dragend", (e) => {
-                this.controls.enabled = true;
-            });
-        },
-        initCar0(model) {
-            if (this.car) {
-                // console.log(this.car);
-                this.scene.remove(this.car);
-                this.removeObj(this.car);
-                this.car = null;
-            }
-
-            // const loading = this.$loading({
-            //     lock: true,
-            //     text: "模型加载中，请稍等...",
-            //     // spinner: "el-icon-loading",
-            //     background: "rgba(0, 0, 0, 0.2)",
-            // });
-
-            showFullScreenLoading();
-
-            var that = this;
-            var loader = new GLTFLoader(); //创建一个FBX加载器
-
-            // loader.load(
-            //     `${this.publicPath}glb/AudiA6_10.glb`,
-            //     function (obj) {
-            loader.load(
-                model,
-                function (obj) {
-                    // loading.close();
-                    tryHideFullScreenLoading();
-                    // console.log(obj);
-
-                    /*  for (let i = 0; i < obj.children.length; i++) {
-                    // obj.children[i].position.set(0, -135, 0);
-                    // obj.children[i].position.set(18, 36, 0);
-                    // obj.children[i].scale.set(30, 30, 30);
-                    // obj.children[i].scale.set(0.45, 0.45, 0.45);
-                    obj.children[i].rotation.set(
-                        (-90 * Math.PI) / 180,
-                        0,
-                        (-180 * Math.PI) / 180
-                    );
-                    // obj.children[i].transparent.set(0.5);
-                    // that.transformControls.attach(obj.children[i]);
-                } */
-
-                    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);
-                    // obj.scene.scale.set(30, 30, 30);
-
-                    // 查看动画数据  2个剪辑对象AnimationClip，一个有关键帧动画，一个没有
-                    // console.log(obj.animations);
-                    // that.scene.add(obj);
-                    that.scene.add(obj.scene);
-                    that.car = obj.scene;
-                },
-                (xhr) => {
-                    // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
-                },
-                (error) => {
-                    // loading.close();
-                    tryHideFullScreenLoading();
-                    console.error(error);
-                }
-            );
-        },
-        initCar1() {
-            // const loader2 = new DDSLoader();
-            // const map1 = loader2.load(
-            //     `${this.publicPath}q5/AudiQ5_Texture.dds`
-            // );
-            // const map2 = loader2.load(`${this.publicPath}q5/env3.dds`);
-            // const map3 = loader2.load(
-            //     `${this.publicPath}q5/Tx_Blur_AudiQ5.dds`
-            // );
-            // const map4 = loader2.load(`${this.publicPath}q5/Tx_Driver.dds`);
-            // const map6 = loader2.load(
-            //     `${this.publicPath}q5/Tx_ln_AudiQ5_09.dds`
-            // );
-            // var that = this;
-            // var loader = new FBXLoader(); //创建一个FBX加载器
-            // // var loader = new GLTFLoader(); //创建一个FBX加载器
-            // // loader.load(`${this.publicPath}6/a8/audia8.fbx`, function (obj) {
-            // // loader.load(`${this.publicPath}6/q5/audiq5.fbx`, function (obj) {
-            // // loader.load(`${this.publicPath}6/a8/audia8.fbx`, function (obj) {
-            // // loader.load(`${this.publicPath}a8/audia8.fbx`, function (obj) {
-            // // loader.load(`${this.publicPath}q5/audiq5.fbx`, function (obj) {
-            // // loader.load(`${this.publicPath}lb/audiq5.fbx`, function (obj) {
-            // loader.load(
-            //     `${this.publicPath}lb/1/fbx/untitled.fbx`,
-            //     function (obj) {
-            //         // loader.load(`${this.publicPath}q6/audiq5.fbx`, function (obj) {
-            //         // loader.load(`${this.publicPath}untitled.fbx`, function (obj) {
-            //         // loader.load(`${this.publicPath}untitled.glb`, function (obj) {
-            //         // loader.load(`${this.publicPath}fbx/Samba Dancing.fbx`, function (obj) {
-            //         // 可以在控制台打印obj对象，找到animations属性
-            //         console.log(obj);
-            //         obj.name = "car";
-            //         // obj.map = map1;
-            //         function _ChangeMaterialEmissive(parent) {
-            //             parent.traverse(function (child) {
-            //                 // if (child instanceof THREE.Mesh) {
-            //                 if (child.isMesh) {
-            //                     // child.material.emissive = new THREE.Color(1, 1, 1);
-            //                     // child.material.emissive = child.material.color;
-            //                     // child.material.emissiveIntensity = 1;
-            //                     // child.material.emissiveMap = child.material.map;
-            //                     // child.material.envMap = child.material.map;
-            //                     // child.material.alphaMap = child.material.map;
-            //                     // child.material.aoMap = child.material.map;
-            //                     // child.material.bumpMap = child.material.map;
-            //                     // child.material.lightMap = child.material.map;
-            //                     // child.material.normalMap = child.material.map;
-            //                     // child.material.specularMap = child.material.map;
-            //                     // child.material.transparent = true;
-            //                     child.castShadow = true;
-            //                     child.receiveShadow = true;
-            //                 }
-            //             });
-            //         }
-            //         _ChangeMaterialEmissive(obj);
-            //         // obj.traverse(function (child) {
-            //         //     if (child.isMesh) {
-            //         //         // child.material.emissive = new THREE.Color(1, 1, 1);
-            //         //         child.material.emissive = child.material.color;
-            //         //         child.material.emissiveIntensity = 1;
-            //         //         child.material.emissiveMap = child.material.map;
-            //         //         child.castShadow = true;
-            //         //         child.receiveShadow = true;
-            //         //     }
-            //         // });
-            //         /*  for (let i = 0; i < obj.children.length; i++) {
-            //         // obj.children[i].position.set(0, -135, 0);
-            //         // obj.children[i].position.set(18, 36, 0);
-            //         // obj.children[i].scale.set(30, 30, 30);
-            //         // obj.children[i].scale.set(0.45, 0.45, 0.45);
-            //         obj.children[i].rotation.set(
-            //             (-90 * Math.PI) / 180,
-            //             0,
-            //             (-180 * Math.PI) / 180
-            //         );
-            //         // obj.children[i].transparent.set(0.5);
-            //         // that.transformControls.attach(obj.children[i]);
-            //     } */
-            //         obj.rotation.set(
-            //             (-90 * Math.PI) / 180,
-            //             0,
-            //             (-180 * Math.PI) / 180
-            //         );
-            //         // obj.scale.set(30, 30, 30);
-            //         // 查看动画数据  2个剪辑对象AnimationClip，一个有关键帧动画，一个没有
-            //         // console.log(obj.animations);
-            //         that.scene.add(obj);
-            //         // that.scene.add(obj.scene);
-            //     }
-            // );
-        },
-        initCar2() {
-            var that = this;
-            var loader2 = new THREE.ObjectLoader();
-            // var loader2 = new THREE.MeshLambertMaterial();
-            // loader2.load(`${that.publicPath}4.js`, function (obj) {
-            loader2.load(`${that.publicPath}car.json`, function (obj) {
-                // loader2.load(`${that.publicPath}Lidar.json`, function (obj) {
-                // console.log(obj);
-                obj.name = "car";
-                // console.log(obj.type);
-                // obj.position.set(0, 0, 0);
-                obj.scale.set(30, 30, 30);
-                obj.rotation.set(
-                    (-90 * Math.PI) / 180,
-                    0,
-                    (-90 * Math.PI) / 180
-                );
-                // obj.layers.set(1);
-                // that.transformControls.attach(obj);
-                that.scene.add(obj);
-            });
-        },
-        initCar3() {
-            var Loader = new MTLLoader(); //材质文件加载器
-            var loader = new OBJLoader(); //obj加载器
-            var that = this;
-
-            Loader.load(
-                // "../../../assets/common/image/female02/female02.mtl",
-                // "../../../../public/female02/female02.mtl",
-                // `${that.publicPath}male02/male02.mtl`,
-                // `${that.publicPath}GTR.mtl`,
-                // `${that.publicPath}lidar.mtl`,
-                // `${that.publicPath}female02/female02.mtl`,
-                // `${that.publicPath}new/audiq5.mtl`,
-                // `${that.publicPath}lb/obj/audiq5.mtl`,
-                // `${that.publicPath}lb/00obj/00.mtl`,
-                `${that.publicPath}lb/1/obj/untitled.mtl`,
-                function (materials) {
-                    // 返回一个包含材质的对象MaterialCreator
-                    // console.log(materials);
-                    // materials.transparent = true;
-                    // materials.opacity = 0.15;
-                    // materials.side = THREE.DoubleSide;
-                    // materials.depthWrite = false;
-                    //obj的模型会和MaterialCreator包含的材质对应起来
-                    loader.setMaterials(materials);
-                    loader.load(
-                        // "../../../../public/female02/female02.obj",
-                        // `${that.publicPath}female02/female02.obj`,
-                        // `${that.publicPath}new/audiq5.obj`,
-                        // `${that.publicPath}lb/00obj/00.obj`,
-                        `${that.publicPath}lb/1/obj/untitled.obj`,
-                        // `${that.publicPath}male02/male02.obj`,
-                        // `${that.publicPath}GTR.obj`,
-                        // `${that.publicPath}lidar.obj`,
-                        // `${that.publicPath}oddysey_2021.obj`,
-                        function (obj) {
-                            // console.log(obj);
-                            obj.name = "car";
-                            // console.log(obj.toJSON());
-                            // console.log(JSON.stringify(obj.toJSON()));
-                            // if (that.car) {
-                            //     that.scene.remove(that.car);
-                            // }
-
-                            for (let i = 0; i < obj.children.length; i++) {
-                                // obj.children[i].position.set(0, -135, 0);
-                                // obj.children[i].position.set(0, -30, 0);
-                                obj.children[i].position.set(0, 0, 0);
-                                // obj.children[i].scale.set(30, 30, 30);
-                                obj.children[i].rotation.set(
-                                    (-90 * Math.PI) / 180,
-                                    0,
-                                    (-180 * Math.PI) / 180
-                                );
-                                // obj.children[i].transparent.set(0.5);
-                                // that.transformControls.attach(obj.children[i]);
-                            }
-                            // that.transformControls.attach(that.cube);
-                            // console.log(obj.children[0].transparent);
-
-                            // that.transformControls.attach(obj);
-                            // that.car = obj;
-                            that.scene.add(obj); //返回的组对象插入场景中
-                            // this.camera.lookAt(obj);
-
-                            // loading.close();
-                            // that.camera.lookAt(obj.position);
-                            // 加载后操作
-                            // obj.children[0].scale.set(200, 200, 200); //缩放球体网格模型
-                            // 通过调节参数，地球表面的凹凸感更强
-                            // obj.children[0].material.normalScale.set(3, 3);
-                            // obj.children[0].position.set(100, 0, 0);
-                        }
-                    );
-                }
-            );
-        },
-        // 初始化车模型
-        initCar(model) {
-            // const loading = this.$loading({
-            //     lock: true,
-            //     text: "模型加载中，请稍等...",
-            //     // spinner: "el-icon-loading",
-            //     background: "rgba(0, 0, 0, 0.2)",
-            // });
-
-            // const car = this.scene.getObjectByName("car");
-            // console.log(car);
-            // console.log(this.scene);
-            // if (car) {
-            //     this.scene.remove(car);
-            // }
-
-            // console.log(type);
-
-            // if (type === "2") {
-            //     this.initCar1();
-            // } else if (type === "f") {
-            //     this.initCar2();
-            // } else if (type === "7") {
-            //     this.initCar3();
-            // } else {
-            //     this.initCar1();
-            // }
-
-            // console.log(model);
-            if (!model) return;
-            if (!model.includes(".glb")) return;
-
-            this.initCar0(model);
-
-            // console.log(this.scene);
-
-            // var Loader = new MTLLoader(); //材质文件加载器
-            // var loader = new OBJLoader(); //obj加载器
-            // var that = this;
-
-            /* var loader1 = new THREE.BufferGeometryLoader();
-            loader1.load(`${that.publicPath}car.json`, function (geometry) {
-            // loader1.load(`${that.publicPath}Lidar.json`, function (geometry) {
-                // 控制台查看加载放回的threejs对象结构
-                console.log(geometry);
-                var material = new THREE.MeshLambertMaterial({
-                    color: 0x0000ff,
-                }); //材质对象Material
-                var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
-                that.scene.add(mesh); //网格模型添加到场景中
-            }); */
-
-            // 没有材质文件，系统自动设置Phong网格材质
-            // loader.load("../../../assets/common/image/oddysey_2021.obj", function (obj) {
-            // loader.load("../../../assets/common/image/tree.obj", function (obj) {
-            // loader.load(`${that.publicPath}oddysey_2021.obj`, function (obj) {
-            // loader.load(`${that.publicPath}GTR.obj`, function (obj) {
-            /* loader.load(`${that.publicPath}Lidar.obj`, function (obj) {
-                if (that.car) {
-                    that.scene.remove(that.car);
-                }
-                console.log(666);
-                // console.log(JSON.stringify(obj.toJSON()));
-                that.car = obj;
-                // 控制台查看返回结构：包含一个网格模型Mesh的组Group
-                console.log(obj);
-                // loading.close();
-                // 查看加载器生成的材质对象：MeshPhongMaterial
-                // console.log(obj.children[0].material);
-                that.scene.add(obj);
-                for (let i = 0; i < obj.children.length; i++) {
-                    obj.children[i].position.set(0, 100, 0);
-                    obj.children[i].scale.set(20, 20, 20);
-                    // obj.children[i].layers.set(1);
-                }
-            }); */
-        },
-        // 初始化
-        init() {
-            this.initScene();
-            this.initCamera();
-            this.initRenderer();
-            this.initTransform();
-            this.initLight();
-            // this.initDragControls();
-
-            this.controls = new OrbitControls(
-                this.camera,
-                this.renderer.domElement
-            ); //创建控件对象
-            this.controls.update();
-            // this.controls.target = this.cube.position
-        },
-        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("container");
-            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;
-
-            x = Math.floor(x / this.rate);
-            y = Math.floor(y / this.rate);
-            z = Math.floor(z / this.rate);
-
-            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;
-
-                // obj.rotateX(0 * -1);
-                // obj.rotateX((h * Math.PI) / 180);
-                this.xAngle = ((h - 90) * Math.PI) / 180;
-
-                // obj.rotateY(0 * -1);
-                // obj.rotateY((p * Math.PI) / 180);
-                this.yAngle = (p * Math.PI) / 180;
-
-                // obj.rotateZ(0 * -1);
-                // obj.rotateZ((r * 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 === "ogt1") {
-                var loader2 = new THREE.ObjectLoader();
-                loader2.load(
-                    `${that.publicPath}sensor/ogt/ogt.json`,
-                    function (obj) {
-                        // console.log(obj);
-                        that.cacheList.push(obj);
-                        for (let i = 0; i < obj.children.length; i++) {
-                            obj.children[i].scale.set(0.2, 0.2, 0.2);
-                        }
-                        obj.position.set(pos.x, pos.y, pos.z);
-                        obj.name = "ogt";
-                        if (canMove) {
-                            that.sensor = obj;
-                        }
-                        that.scene.add(obj);
-                    }
-                );
-                return;
-            }
-
-            if (type === "ogt1" && this.ogt) {
-                setTimeout(() => {
-                    let obj1 = this.ogt;
-                    // for (let i = 0; i < obj1.children.length; i++) {
-                    //     obj1.children[i].scale.set(0.2, 0.2, 0.2);
-                    // }
-                    obj1.position.set(pos.x, pos.y, pos.z);
-
-                    if (canMove) {
-                        that.sensor = obj1;
-                    }
-                    obj1.name = "ogt";
-                    // console.log(that.scene);
-
-                    that.scene.add(obj1); //返回的组对象插入场景中
-                }, 600);
-                return;
-            }
-
-            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`;
-            }
-
-            let loading = null;
-            if (type === "ogt") {
-                // loading = this.$loading({
-                //     lock: true,
-                //     text: "模型加载中，请稍等...",
-                //     // spinner: "el-icon-loading",
-                //     background: "rgba(0, 0, 0, 0.2)",
-                // });
-                showFullScreenLoading();
-            }
-
-            Loader.load(
-                mtlUrl,
-                function (materials) {
-                    // console.log(materials);
-                    loader.setMaterials(materials);
-                    loader.load(objUrl, function (obj) {
-                        // console.log(obj);
-                        // console.log(obj.clone());
-                        // console.log(JSON.stringify(obj.toJSON()));
-                        // if (type === "ogt" && !that.ogt) {
-                        //     that.ogt = obj.clone();
-                        // }
-
-                        if (type === "ogt") {
-                            // loading.close();
-                            tryHideFullScreenLoading();
-                        }
-
-                        that.cacheList.push(obj);
-                        for (let i = 0; i < obj.children.length; i++) {
-                            if (type === "camera") {
-                                // let scale = 0.8 * that.scale;
-                                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.children[i].position.set(0, 0, 0);
-                            // obj.children[i].geometry.translate(pos.x, pos.y, pos.z);
-                            // obj.children[i].position.set(pos.x, pos.y, pos.z);
-                            // obj.children[i].geometry.translate(-pos.x, -pos.y, -pos.z);
-                            // obj.children[i].scale.set(30, 30, 30);
-                        }
-                        obj.position.set(pos.x, pos.y, pos.z);
-                        // obj.geometry.translate.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") {
-                        // loading.close();
-                        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,
-                // emissive: 0xfaff72,
-                lightMapIntensity: 0.1,
-                color: 0x4c4c4c,
-            };
-
-            if (type === "camera") {
-                obj.emissive = 0x000080;
-                // obj.color = 0xfaff72;
-            } else if (type === "ogt") {
-                obj.emissive = 0x008000;
-                // obj.color = 0x33cc66;
-            } else if (type === "lidar") {
-                // obj.emissive = 0xff0000;
-                // obj.color = 0xcc3366;
-                obj.emissive = 0xff4500;
-            } else if (type === "gps") {
-                // obj.emissive = 0xfaff72;
-                // obj.color = 0x3366cc;
-                obj.emissive = 0x8a2be2;
-            }
-
-            var cubeMaterial = new THREE.MeshLambertMaterial(obj);
-            // var cubeMaterial = new THREE.MeshBasicMaterial(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.rotateX(0 * -1);
-                // cube.rotateX((rotation.x * Math.PI) / 180);
-                // cube.rotateY(0 * -1);
-                // cube.rotateY((rotation.y * Math.PI) / 180);
-                // cube.rotateZ(0 * -1);
-                // cube.rotateZ((rotation.z * Math.PI) / 180);
-
-                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() {
-            // 避免重复加载所有传感器
-            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();
-            }
-
-            // console.log(this.configList);
-
-            this.showSensor(this.configList.camera, "camera");
-            this.showSensor(this.configList.ogt, "ogt");
-            this.showSensor(this.configList.lidar, "lidar");
-            this.showSensor(this.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;
-        },
-        showTX() {
-            var pointsArr1 = [
-                // [5, -1, 33],
-                // [5, 11, 33],
-                // [-5, -1, 33],
-                // [-5, 11, 33],
-                [0, 0, 0],
-                [10, -11, 66],
-                [30, 31, 66],
-                [-20, -21, 66],
-                [-30, 21, 66],
-            ];
-
-            let x = 0,
-                y = 0,
-                z = 0;
-
-            let r = 60;
-            z = r;
-
-            let a = 120,
-                b = 40;
-
-            x = Math.tan(THREE.MathUtils.degToRad(a / 2)) * r;
-            y = Math.tan(THREE.MathUtils.degToRad(b / 2)) * r;
-
-            let x1 = 0,
-                y1 = 0,
-                z1 = 0;
-
-            let r1 = 20;
-            z1 = r1;
-
-            x1 = Math.tan(THREE.MathUtils.degToRad(a / 2)) * r1;
-            y1 = Math.tan(THREE.MathUtils.degToRad(b / 2)) * r1;
-
-            let pointsArr2 = [
-                [0, 0, 0],
-                // [-x1, y1, z1],
-                // [-x1, -y1, z1],
-                // [x1, y1, z1],
-                // [x1, -y1, z1],
-                [-x, y, z],
-                [-x, -y, z],
-                [x, y, z],
-                [x, -y, z],
-            ];
-
-            let x2 = 0,
-                y2 = 0,
-                z2 = 0,
-                x3 = 0,
-                y3 = 0,
-                z3 = 0,
-                x4 = 0,
-                y4 = 0,
-                z4 = 0,
-                x6 = 0,
-                y6 = 0,
-                z6 = 0,
-                r2 = 90,
-                a2 = 30,
-                b2 = 60,
-                c2 = 90,
-                d2 = 60;
-
-            x2 = Math.tan(THREE.MathUtils.degToRad(a2 / 2)) * r2;
-            y2 = Math.tan(THREE.MathUtils.degToRad(b2 / 2)) * r2;
-            x3 = Math.tan(THREE.MathUtils.degToRad(c2 / 2)) * r2;
-            y3 = Math.tan(THREE.MathUtils.degToRad(d2 / 2)) * r2;
-
-            let pointsArr3 = [
-                [0, 0, 0],
-                [-x2, y3, r2],
-                [-x3, -y3, r2],
-                [x2, y2, r2],
-                [x3, -y2, r2],
-            ];
-            // console.log(pointsArr3);
-
-            let points = pointsArr3.map(
-                (d) => new THREE.Vector3(d[0], d[1], d[2])
-            );
-
-            let material = new THREE.MeshPhongMaterial({
-                color: 0x2c85e1,
-                shininess: 60,
-                specular: 0x2c85e1,
-                // opacity: 0.5,
-                // transparent: true,
-            });
-
-            let tixing = new ConvexGeometry(points);
-            //通过ConvexGeometry凸包绘制一个梯台，当然也可以使用ExtrudeGeometry挤压几何体，
-            let tixingMesh = new THREE.Mesh(tixing, material);
-            this.scene.add(tixingMesh);
-            // console.log(tixingMesh);
-
-            /* let vertices = [];
-
-            vertices.push(-155, 24, 90);
-            vertices.push(-63, -24, 90);
-            vertices.push(155, 91, 90);
-            vertices.push(63, -90, 90);
-
-            const geometry1 = new THREE.BufferGeometry();
-            geometry1.setAttribute(
-                "position",
-                new THREE.Float32BufferAttribute(vertices, 3)
-            );
-
-            const material1 = new THREE.PointsMaterial({
-                color: 0xff0000,
-                size: 10,
-                fog: false,
-            });
-
-            const points1 = new THREE.Points(geometry1, material1);
-
-            this.scene.add(points1); */
-
-            // if (this.transformControls) {
-            //     this.transformControls.attach(tixingMesh);
-            // }
-
-            // const a = new THREE.Vector3(1, 1, 0);
-            // const b = new THREE.Vector3(0, 0, 0);
-            // const d = a.distanceTo(b);
-            // const e = a.angleTo(b);
-
-            // console.log(d, e, (e * 180) / Math.PI, THREE.MathUtils.radToDeg(e));
-
-            // (value * Math.PI) / 180;
-        },
-    },
-
-    mounted() {
-        this.go();
-        // this.showTX();
-
-        // console.log(THREE.Loader.Handlers.add);
-        // THREE.Loader.Handlers.add( /\.dds$/i, new DDSLoader() );
-
-        // console.log(new THREE.LoadingManager()); RGBELoader
-        // let dds = new THREE.LoadingManager();
-        // dds.addHandler(/\.dds$/i, new DDSLoader());
-        // dds.addHandler(/\.rgb$/i, new RGBELoader());
-        // console.log(dds);
-
-        // THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());
-        // THREE.DefaultLoadingManager.addHandler(/\.rgb$/i, new RGBELoader());
-        // console.log(THREE.DefaultLoadingManager);
-
-        // console.log(THREE.LoadingManager.addHandler);
-        // THREE.Loader.Handlers.add( /\.dds$/i, new DDSLoader());
-        // THREE.Loader.addHandler(/\.dds$/i, new DDSLoader());
-        // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
-        // THREE.Loader.Handlers.add( /\.dds$/i, new THREE.DDSLoader() );
-
-        // if (!this.isAdd) {
-        //     setTimeout(() => {
-        //         this.initCar();
-        //     }, 270);
-        // }
-    },
-    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.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>
-#container {
-    width: 100%;
-    height: calc(100vh - 125px);
-}
-</style>