three优化

src/views/modelLibrary/components/threeSensorModel.vue

@@ -8,9 +8,16 @@
 import * as THREE from "three";
 import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
 import { ConvexGeometry } from "three/examples/jsm/geometries/ConvexGeometry.js";
+import { OBJLoader } from "three/examples/jsm/loaders/OBJLoader.js";
+import { MTLLoader } from "three/examples/jsm/loaders/MTLLoader.js";
+import { mapState } from "vuex";
+import {
+    showFullScreenLoading,
+    tryHideFullScreenLoading,
+} from "../../../axios/filter";
 
 export default {
-    name: "threeSensorModel", // 传感器模型中的threeJS
+    name: "threeSensorModel", // 传感器配置中的threeJS
     components: {},
 
     data() {
@@ -32,10 +39,19 @@ export default {
             raf: null,
             canDrag: true, // 是否可移动
             dragControls: null,
-            scale: 1.5, // 物体加载换算倍数
+            sensor: null, // 当前操作的传感器配置
+            cameraSensor: null,
+            ogt: null,
+            lidar: null,
+            gps: null,
+            // scale: 2, // 物体加载换算倍数
         };
     },
 
+    computed: {
+        ...mapState(["scale"]),
+    },
+
     props: {
         coordinate: {
             type: Object,
@@ -64,28 +80,14 @@ export default {
         },
         // 相机
         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);
         },
         // 渲染器
@@ -111,47 +113,9 @@ export default {
             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);
         },
         // 初始化模型
         initContent() {
@@ -161,6 +125,38 @@ export default {
                 this.clearCache(obj);
             }
 
+            const sensor = this.scene.getObjectByName("sensor");
+            if (sensor) {
+                this.scene.remove(sensor);
+                this.clearCache(sensor);
+            }
+
+            if (this.type === 1) {
+                if (this.cameraSensor) {
+                    this.scene.add(this.cameraSensor);
+                } else {
+                    this.initSensor({ x: 0, y: 0, z: 0 }, "camera");
+                }
+            } else if (this.type === 2) {
+                if (this.ogt) {
+                    this.scene.add(this.ogt);
+                } else {
+                    this.initSensor({ x: 0, y: 0, z: 0 }, "ogt");
+                }
+            } else if (this.type === 3) {
+                if (this.lidar) {
+                    this.scene.add(this.lidar);
+                } else {
+                    this.initSensor({ x: 0, y: 0, z: 0 }, "lidar");
+                }
+            } else if (this.type === 4) {
+                if (this.gps) {
+                    this.scene.add(this.gps);
+                } else {
+                    this.initSensor({ x: 0, y: 0, z: 0 }, "gps");
+                }
+            }
+
             if (this.type != 2) {
                 let r = this.coordinate.f;
                 let r1 = this.coordinate.n;
@@ -192,7 +188,6 @@ export default {
 
             if (a >= 90) a = 89.99;
             if (b >= 90) b = 89.99;
-            // console.log(Math.tan(THREE.MathUtils.degToRad(0)));
 
             x = Math.tan(THREE.MathUtils.degToRad(a)) * r;
             y = Math.tan(THREE.MathUtils.degToRad(b)) * r;
@@ -306,8 +301,6 @@ export default {
 
             let material = new THREE.MeshPhongMaterial({
                 emissive: color,
-                // shininess: 60,
-                // specular: this.color,
                 color: 0x4c4c4c,
                 transparent: true,
                 opacity: 0.3,
@@ -320,13 +313,96 @@ export default {
             tixingMesh.name = "cube";
             this.scene.add(tixingMesh);
         },
+        // 初始化传感器
+        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();
+                        }
+
+                        if (type === "camera") {
+                            that.cameraSensor = obj;
+                        } else if (type === "ogt") {
+                            that.ogt = obj;
+                        } else if (type === "lidar") {
+                            that.lidar = obj;
+                        } else if (type === "gps") {
+                            that.gps = obj;
+                        }
+
+                        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(scale, scale, scale);
+                            } else if (type === "ogt") {
+                                let scale = 0.2 * that.scale;
+                                obj.children[i].scale.set(scale, scale, scale);
+                            } else if (type === "lidar") {
+                                let scale = 0.1 * that.scale;
+                                obj.children[i].scale.set(scale, scale, scale);
+                            } else if (type === "gps") {
+                                let scale = 40 * that.scale;
+                                obj.children[i].scale.set(scale, scale, scale);
+                            }
+                        }
+                        obj.position.set(pos.x, pos.y, pos.z);
+                        obj.name = "sensor";
+
+                        that.sensor = obj;
+
+                        that.scene.add(that.sensor); //返回的组对象插入场景中
+                    });
+                },
+                (xhr) => {
+                    // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
+                },
+                (error) => {
+                    if (type === "ogt") {
+                        tryHideFullScreenLoading();
+                    }
+                    console.error(error);
+                }
+            );
+        },
         // 初始化
         init() {
             this.initScene();
             this.initCamera();
             this.initRenderer();
             this.initLight();
-            // this.initContent();
 
             this.controls = new OrbitControls(
                 this.camera,

src/views/modelLibrary/components/threeVehicleConfiguration.vue

@@ -11,14 +11,15 @@ 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 { 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
@@ -46,13 +47,21 @@ export default {
             raf: null,
             canDrag: true, // 是否可移动
             dragControls: null,
-            sensor: null, // 当前操作的传感器模型
+            sensor: null, // 当前操作的传感器配置
             ogt: null,
-            scale: 1.5, // 物体加载换算倍数
-            rate: 20, // 坐标换算倍数
+            // scale: 2, // 物体加载换算倍数
+            // rate: 20, // 坐标换算倍数
         };
     },
 
+    computed: {
+        ...mapState(["scale"]),
+        // 坐标换算倍数
+        rate() {
+            return 40 / this.scale;
+        },
+    },
+
     props: {
         xValue: {
             type: Number,
@@ -178,6 +187,23 @@ export default {
             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,
@@ -338,7 +364,7 @@ export default {
                 1,
                 false
             );
-            cubeGeometry.translate(0, -150, 0);
+            cubeGeometry.translate(0, -75 * this.scale, 0);
 
             let obj = {
                 color: 0x4c4c4c,
@@ -438,7 +464,7 @@ export default {
         },
         initCar0(model) {
             if (this.car) {
-                console.log(this.car);
+                // console.log(this.car);
                 this.scene.remove(this.car);
                 this.removeObj(this.car);
                 this.car = null;
@@ -507,103 +533,95 @@ export default {
             );
         },
         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);
-                }
-            );
+            // 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;
@@ -732,7 +750,7 @@ export default {
             //     this.initCar1();
             // }
 
-            console.log(model);
+            // console.log(model);
             if (!model) return;
             if (!model.includes(".glb")) return;
 
@@ -845,9 +863,9 @@ export default {
             this.yAngle = 0;
             this.zAngle = 0;
 
-            let x = +this.$parent.formA.sensorX || 0;
-            let y = +this.$parent.formA.sensorY || 0;
-            let z = +this.$parent.formA.sensorZ || 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;
@@ -935,7 +953,7 @@ export default {
                         that.sensor = obj1;
                     }
                     obj1.name = "ogt";
-                    console.log(that.scene);
+                    // console.log(that.scene);
 
                     that.scene.add(obj1); //返回的组对象插入场景中
                 }, 600);
@@ -1034,7 +1052,7 @@ export default {
                 1,
                 false
             );
-            cubeGeometry.translate(0, -150, 0);
+            cubeGeometry.translate(0, -75 * this.scale, 0);
 
             let obj = {
                 transparent: true,
@@ -1096,9 +1114,9 @@ export default {
                     this.initContentToShow(
                         null,
                         {
-                            x: Math.floor(item.sensorX / this.rate || 0),
-                            y: Math.floor(item.sensorY / this.rate || 0),
-                            z: Math.floor(item.sensorZ / this.rate || 0),
+                            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,
@@ -1110,9 +1128,9 @@ export default {
 
                     this.initSensor(
                         {
-                            x: Math.floor(item.sensorX / this.rate || 0),
-                            y: Math.floor(item.sensorY / this.rate || 0),
-                            z: Math.floor(item.sensorZ / this.rate || 0),
+                            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
@@ -1146,7 +1164,7 @@ export default {
                 this.transformControls.detach();
             }
 
-            console.log(this.configList);
+            // console.log(this.configList);
 
             this.showSensor(this.configList.camera, "camera");
             this.showSensor(this.configList.ogt, "ogt");
@@ -1254,7 +1272,7 @@ export default {
                 [x2, y2, r2],
                 [x3, -y2, r2],
             ];
-            console.log(pointsArr3);
+            // console.log(pointsArr3);
 
             let points = pointsArr3.map(
                 (d) => new THREE.Vector3(d[0], d[1], d[2])
@@ -1272,7 +1290,7 @@ export default {
             //通过ConvexGeometry凸包绘制一个梯台，当然也可以使用ExtrudeGeometry挤压几何体，
             let tixingMesh = new THREE.Mesh(tixing, material);
             this.scene.add(tixingMesh);
-            console.log(tixingMesh);
+            // console.log(tixingMesh);
 
             /* let vertices = [];
 
@@ -1325,7 +1343,7 @@ export default {
         // dds.addHandler(/\.rgb$/i, new RGBELoader());
         // console.log(dds);
 
-        THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());
+        // THREE.DefaultLoadingManager.addHandler(/\.dds$/i, new DDSLoader());
         // THREE.DefaultLoadingManager.addHandler(/\.rgb$/i, new RGBELoader());
         // console.log(THREE.DefaultLoadingManager);
 

src/views/workManagement/components/threeProjectInfo.vue

@@ -14,6 +14,7 @@ import {
     showFullScreenLoading,
     tryHideFullScreenLoading,
 } from "../../../axios/filter";
+import { mapState } from "vuex";
 
 export default {
     name: "threeProjectInfo", // 项目详情中的threeJS
@@ -38,13 +39,21 @@ export default {
             raf: null,
             canDrag: true, // 是否可移动
             dragControls: null,
-            sensor: null, // 当前操作的传感器模型
+            sensor: null, // 当前操作的传感器配置
             ogt: null,
-            scale: 1.5, // 物体加载换算倍数
-            rate: 20, // 坐标换算倍数
+            // scale: 2, // 物体加载换算倍数
+            // rate: 20, // 坐标换算倍数
         };
     },
 
+    computed: {
+        ...mapState(["scale"]),
+        // 坐标换算倍数
+        rate() {
+            return 40 / this.scale;
+        },
+    },
+
     props: {
         carModel: {
             type: String,
@@ -127,14 +136,9 @@ export default {
             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);
-            // this.scene.add(dirLight);
+            this.scene.add(dirLight);
         },
         // 初始化模型
         initContent(r, position, rotation, type) {
@@ -145,7 +149,7 @@ export default {
                 1,
                 false
             );
-            cubeGeometry.translate(0, -150, 0);
+            cubeGeometry.translate(0, -75 * this.scale, 0);
 
             let obj = {
                 color: 0x4c4c4c,
@@ -188,29 +192,19 @@ export default {
         },
         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}untitled.glb`, function (obj) {
             loader.load(
                 model,
                 function (obj) {
-                    // loading.close();
                     tryHideFullScreenLoading();
 
                     obj.scene.rotation.set(
@@ -229,7 +223,6 @@ export default {
                     // console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
                 },
                 (error) => {
-                    // loading.close();
                     tryHideFullScreenLoading();
                     console.error(error);
                 }
@@ -237,7 +230,6 @@ export default {
         },
         // 初始化车模型
         initCar(model) {
-            console.log(model);
             if (!model) return;
             if (!model.includes(".glb")) return;
 
@@ -306,9 +298,9 @@ export default {
             this.yAngle = 0;
             this.zAngle = 0;
 
-            let x = +this.$parent.formA.sensorX || 0;
-            let y = +this.$parent.formA.sensorY || 0;
-            let z = +this.$parent.formA.sensorZ || 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;
@@ -333,16 +325,10 @@ export default {
                 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);
@@ -373,14 +359,7 @@ export default {
                 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();
             }
 
@@ -390,7 +369,6 @@ export default {
                     loader.setMaterials(materials);
                     loader.load(objUrl, function (obj) {
                         if (type === "ogt") {
-                            // loading.close();
                             tryHideFullScreenLoading();
                         }
 
@@ -420,7 +398,6 @@ export default {
                 },
                 (error) => {
                     if (type === "ogt") {
-                        // loading.close();
                         tryHideFullScreenLoading();
                     }
                     console.error(error);
@@ -436,7 +413,7 @@ export default {
                 1,
                 false
             );
-            cubeGeometry.translate(0, -150, 0);
+            cubeGeometry.translate(0, -75 * this.scale, 0);
 
             let obj = {
                 transparent: true,
@@ -483,9 +460,9 @@ export default {
                     this.initContentToShow(
                         null,
                         {
-                            x: Math.floor(item.sensorX / this.rate || 0),
-                            y: Math.floor(item.sensorY / this.rate || 0),
-                            z: Math.floor(item.sensorZ / this.rate || 0),
+                            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,
@@ -497,9 +474,9 @@ export default {
 
                     this.initSensor(
                         {
-                            x: Math.floor(item.sensorX / this.rate || 0),
-                            y: Math.floor(item.sensorY / this.rate || 0),
-                            z: Math.floor(item.sensorZ / this.rate || 0),
+                            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
@@ -565,7 +542,6 @@ export default {
 
     mounted() {
         this.go();
-        // console.log(showFullScreenLoading);
     },
     destroyed() {
         window.removeEventListener("resize", this.onWindowResize);