修复3d模式下各模型和右侧台架列表的联动

src/uwb-sample.js

@@ -1,11 +1,11 @@
 //import { FBXLoader } from "./FBXLoader.js";
 //import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 //import { MeshBasicMaterial, MeshStandardMaterial, Vector3 } from "three";
-import Vue from "vue";
+// import Vue from "vue";
 import fetchAndCombine from "../public/loader/loader";
 import { UWB } from "../public/plugin/uwb/index.js";
-import { FXAAShader } from "../public/shader/FAAXShader.js"
-import '../public/libs/tools.js'
+// import { FXAAShader } from "../public/shader/FAAXShader.js"
+import '../public/libs/tools.js';
 // import { DBUtil } from "../src/DButil";
 
 // 定义一个函数，接受元素ID和一个回调函数作为参数，用于处理点击事件
@@ -37,7 +37,7 @@ let textureOffline = textureLoader.load('../images/location_offline.png');
 window.benchMeshMap = {}; // (dat_bench_extend中的bench_id)和(台架模型)映射map
 window.benchMeshWaterMap = {}; // (dat_bench_extend中的bench_id)和(水滴模型)映射map
 window.benchDBList = null; // dat_bench_extend中存储的台架信息
-window.benchPosList = []; // 弃用
+window.benchPosList = [];
 
 // 初始加载
 function getsqlData(sdkInstance, uwbInstance, bAddModel) {
@@ -1183,7 +1183,7 @@ function benchRefresh(result) {
         deleteChildMesh = null; // 置空指向该3D模型的变量
         delete window.benchMeshMap[bench_id];
       }
-    };
+    }
 
     for (var item of result) {
       let x = item.x;
@@ -1373,17 +1373,19 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
         let uwbInstance = uwbInit(originPointPose);
         window.uwbInstance = uwbInstance;
 
-
-        let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
-        sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
+        let ambientLight = new THREE.AmbientLight(0xffffff); // 设置环境光
+        sdkInstance.sceneRenderer.scene.add(ambientLight); // 将环境光添加到场景中
         let pointLight = new THREE.PointLight(0xffffff, 1, 0);
-        pointLight.position.set(200, 200, 200); //设置点光源位置
-        sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
+        pointLight.position.set(200, 200, 200); // 设置点光源位置
+        sdkInstance.sceneRenderer.scene.add(pointLight); // 将点光源添加至场景
+        
         if (g_gltf_downloaded == false) {
           g_gltf_downloaded = true;
         }
 
+        // 模型加载完成，进入模型页面，添加摆放的物体
         if (g_fbxLoader == null) {
+          getsqlData(sdkInstance, uwbInstance, false);
           // g_fbxLoader = new THREE.GLTFLoader();
           // g_fbxLoader.load("../models/mesh2.gltf", function (fbx) {
           //   let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
@@ -1419,11 +1421,9 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
           //     // getsqlData(sdkInstance, uwbInstance, false)
           //   }
           // }, 6 * 1000);
-          getsqlData(sdkInstance, uwbInstance, false);
         }
 
-        // 创建物体add
-        // 模型加载完成，进入模型页面，添加摆放的物体
+        // 增加3D模式下的模型交互事件
         let canvas = document.getElementsByTagName('canvas')[0];
 
         canvas.style.borderRadius = "0px";
@@ -1434,149 +1434,153 @@ export function uwbMain(domId, modelWidth, modelHeight, finalMode, callback) {
           mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
           mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
-
           raycaster.setFromCamera(mouse, sdkInstance.player.camera);
           let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children);
-
+          // 3d模式下点击
           if (intersects && intersects.length > 0) {
             let bFirst = true;
             let bool = false;
-            let bool1 = false;
             intersects.forEach(m => {
-              // console.log('点击水滴', event, m && m.object && m.object.geometry && m.object.geometry.type, m.object)
-              if (m.object.geometry.type != "PlaneBufferGeometry") {
+              // console.log('点击模型', m.object.geometry.type, event, m.object)
+              // 水滴：PlaneGeometry、台架：BufferGeometry
+              if (m.object.geometry.type == "BufferGeometry") {
                 if (m.object.userData && m.object.userData.benchFlag == true) {
                   if (!bool) {
                     bool = true;
-                    //m.object.material = window.shader1;
-                    ////m.object.scale.set(10, 10, 10)
-                    //m.object.scale.set(5, 5, 5)
-                    //outlineObj(m.object)
-                    // let player = document.getElementById(domId)
-                    // player.style.display = "none
                     if (box) {
                       sdkInstance.sceneRenderer.scene.remove(box);
                     }
-                    console.log(m);
-                    console.log("==============查看m对象===============")
-                    window.handleBenchClick(m.object.userData.benchId, m.object.userData.bShowRemoteButton)
-                    box = new THREE.BoxHelper(m.object, '#ff0000');  //object 模型
-                    sdkInstance.sceneRenderer.scene.add(box)
-                    //let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
-                    //sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
-                    //let pointLight = new THREE.PointLight(0xffffff, 1, 0);
-                    //pointLight.position.set(200, 200, 200); //设置点光源位置
-                    //sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
+                    window.handleBenchClick(m.object.userData.benchId, m.object.userData.bShowRemoteButton); // 打开详情弹窗
+                    box = new THREE.BoxHelper(m.object, '#ff0000'); // 台架模型包围红框
+                    sdkInstance.sceneRenderer.scene.add(box);
                   }
-                  //outlineObj(m.object
-                  //m.object.material = FXAAShader
-
-                }
-              } else if (m.object.geometry.type == "PlaneBufferGeometry") {
-                if (m.object.userData && m.object.userData.benchFlag == true) {
-                  window.handleListClick(m.object.userData.benchId)
+                  window.handleListClick(m.object.userData.benchId); // 联动右侧台架列表点击事件
                 }
               }
+              // if (m.object.geometry.type != "PlaneBufferGeometry") {
+              //   if (m.object.userData && m.object.userData.benchFlag == true) {
+              //     if (!bool) {
+              //       bool = true;
+              //       //m.object.material = window.shader1;
+              //       ////m.object.scale.set(10, 10, 10)
+              //       //m.object.scale.set(5, 5, 5)
+              //       //outlineObj(m.object)
+              //       // let player = document.getElementById(domId)
+              //       // player.style.display = "none
+              //       if (box) {
+              //         sdkInstance.sceneRenderer.scene.remove(box);
+              //       }
+              //       // console.log(m);
+              //       // console.log("==============查看m对象===============")
+              //       window.handleBenchClick(m.object.userData.benchId, m.object.userData.bShowRemoteButton)
+              //       box = new THREE.BoxHelper(m.object, '#ff0000');  //object 模型
+              //       sdkInstance.sceneRenderer.scene.add(box)
+              //       //let ambientLight = new THREE.AmbientLight(0xffffff); //设置环境光
+              //       //sdkInstance.sceneRenderer.scene.add(ambientLight); //将环境光添加到场景中
+              //       //let pointLight = new THREE.PointLight(0xffffff, 1, 0);
+              //       //pointLight.position.set(200, 200, 200); //设置点光源位置
+              //       //sdkInstance.sceneRenderer.scene.add(pointLight); //将点光源添加至场景
+              //     }
+              //     //outlineObj(m.object
+              //     //m.object.material = FXAAShader
+              //   }
+              // } else if (m.object.geometry.type == "PlaneBufferGeometry") {
+              //   if (m.object.userData && m.object.userData.benchFlag == true) {
+              //     window.handleListClick(m.object.userData.benchId)
+              //   }
+              // }
             })
             bool = false;
-            bool1 = false;
           }
         };
 
         canvas.onmousemove = (event) => {
-
-          let mouse = new THREE.Vector2();
-          let raycaster = new THREE.Raycaster();
-          let housePlayer = document.getElementById('house-player');
-          let marginLeft = 0;
-          let marginTop = 0;
-          if (housePlayer) {
-            let mapDom = document.getElementsByClassName("ordinary-map-container")[0];
-            let style = getComputedStyle(mapDom);
-            let width = parseFloat(style.width);
-            let height = parseFloat(style.height);
-            marginLeft = (width - (width * 1.8)) / 2;
-            marginTop = (height - (height * 1.8)) / 2;
-
-            mouse.x = ((event.clientX + Math.abs(marginLeft)) / parseFloat(housePlayer.style.width)) * 2 - 1;
-            mouse.y = -((event.clientY + Math.abs(marginTop)) / parseFloat(housePlayer.style.height)) * 2 + 1;
-          }
-
-          raycaster.setFromCamera(mouse, sdkInstance.player.cameras.floorplan);
-          let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children);
-
-          if (intersects && intersects.length > 0) {
-            let bFirst = true;
-            let bool = false;
-            let bool1 = false;
-            for (let z = 0; z < intersects.length; z++) {
-              let m = intersects[z];
-              if (m && m.object && (m.object.userData.type == 'water')) {
-                // window.store.dispatch('benchList/setMouseOverBench', {
-                //   bench_id: m.object.userData.benchId,
-                //   pageX: event.x,
-                //   pageY: event.y,
-                //   status: true
-                // })
-                break;
-              } else {
-                // window.store.dispatch('benchList/setMouseOverBench', {
-                //   bench_id: m.object.userData.benchId,
-                //   pageX: event.x,
-                //   pageY: event.y,
-                //   status: false
-                // })
-              }
-            }
-            bool = false;
-            bool1 = false;
-          }
+          // let mouse = new THREE.Vector2();
+          // let raycaster = new THREE.Raycaster();
+          // let housePlayer = document.getElementById('house-player');
+          // let marginLeft = 0;
+          // let marginTop = 0;
+          // if (housePlayer) {
+          //   let mapDom = document.getElementsByClassName("ordinary-map-container")[0];
+          //   let style = getComputedStyle(mapDom);
+          //   let width = parseFloat(style.width);
+          //   let height = parseFloat(style.height);
+          //   marginLeft = (width - (width * 1.8)) / 2;
+          //   marginTop = (height - (height * 1.8)) / 2;
+
+          //   mouse.x = ((event.clientX + Math.abs(marginLeft)) / parseFloat(housePlayer.style.width)) * 2 - 1;
+          //   mouse.y = -((event.clientY + Math.abs(marginTop)) / parseFloat(housePlayer.style.height)) * 2 + 1;
+          // }
+          // raycaster.setFromCamera(mouse, sdkInstance.player.cameras.floorplan);
+
+          // let intersects = raycaster.intersectObjects(sdkInstance.sceneRenderer.scene.children);
+          // if (intersects && intersects.length > 0) {
+          //   let bFirst = true;
+          //   let bool = false;
+          //   for (let z = 0; z < intersects.length; z++) {
+          //     let m = intersects[z];
+          //     if (m && m.object && (m.object.userData.type == 'water')) {
+          //       window.store.dispatch('benchList/setMouseOverBench', {
+          //         bench_id: m.object.userData.benchId,
+          //         pageX: event.x,
+          //         pageY: event.y,
+          //         status: true
+          //       })
+          //       break;
+          //     } else {
+          //       window.store.dispatch('benchList/setMouseOverBench', {
+          //         bench_id: m.object.userData.benchId,
+          //         pageX: event.x,
+          //         pageY: event.y,
+          //         status: false
+          //       })
+          //     }
+          //   }
+          //   bool = false;
+          // }
         };
-        return;
 
-        let outlinePass = null;
+        // 选中模型轮廓高光
+        // let outlinePass = null;
+        // function outlineObj(selectedObjects) {
 
-        function outlineObj(selectedObjects) {
+        //   composer = new THREE.EffectComposer(sdkInstance.sceneRenderer.renderer); // 特效组件
 
-          composer = new THREE.EffectComposer(sdkInstance.sceneRenderer.renderer); // 特效组件
+        //   var renderPass = new THREE.RenderPass(sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
+        //   composer.addPass(renderPass); // 特效渲染
 
-          var renderPass = new THREE.RenderPass(sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
-          composer.addPass(renderPass); // 特效渲染
+        //   outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
+        //   composer.addPass(outlinePass); // 加入高光特效
 
-          outlinePass = new THREE.OutlinePass(new THREE.Vector2(window.innerWidth, window.innerHeight), sdkInstance.sceneRenderer.scene, sdkInstance.player.camera);
-          composer.addPass(outlinePass); // 加入高光特效
+        //   outlinePass.pulsePeriod = 2; //数值越大，律动越慢
+        //   outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色
+        //   outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色
+        //   outlinePass.usePatternTexture = true; // 使用纹理覆盖？
+        //   outlinePass.edgeStrength = 5; // 高光边缘强度
+        //   outlinePass.edgeGlow = 1; // 边缘微光强度
+        //   outlinePass.edgeThickness = 1; // 高光厚度
 
-          outlinePass.pulsePeriod = 2; //数值越大，律动越慢
-          outlinePass.visibleEdgeColor.set(0xff0000); // 高光颜色
-          outlinePass.hiddenEdgeColor.set(0x000000);// 阴影颜色
-          outlinePass.usePatternTexture = true; // 使用纹理覆盖？
-          outlinePass.edgeStrength = 5; // 高光边缘强度
-          outlinePass.edgeGlow = 1; // 边缘微光强度
-          outlinePass.edgeThickness = 1; // 高光厚度
+        //   var textureLoader = new THREE.TextureLoader();
+        //   textureLoader.load('../models/matcap.png', function (texture) {
 
-          var textureLoader = new THREE.TextureLoader();
-          textureLoader.load('../models/matcap.png', function (texture) {
+        //     outlinePass.patternTexture = texture;
+        //     texture.wrapS = THREE.RepeatWrapping;
+        //     texture.wrapT = THREE.RepeatWrapping;
 
-            outlinePass.patternTexture = texture;
-            texture.wrapS = THREE.RepeatWrapping;
-            texture.wrapT = THREE.RepeatWrapping;
-
-
-            outlinePass.selectedObjects = selectedObjects; // 需要高光的obj
-            if (composer != null) {
-              animate();
-            }
-          })
-
-        };
 
+        //     outlinePass.selectedObjects = selectedObjects; // 需要高光的obj
+        //     if (composer != null) {
+        //       animate();
+        //     }
+        //   })
 
-        function animate() {
-          requestAnimationFrame(animate);
-          if (composer != null) {
-            composer.render();
-          }
-        };
+        // };
+        // function animate() {
+        //   requestAnimationFrame(animate);
+        //   if (composer != null) {
+        //     composer.render();
+        //   }
+        // };
 
       });
       sdkInstance.on("modeChange", function (currentMode, newMode) {

src/views/ordinaryPage/index.vue

@@ -976,7 +976,6 @@ export default {
 
     setTimeout(() => {
       let self = this;
-
       var objRBL = this.remoteBenchList;
       if (objRBL) {
         wsArrayLength = objRBL.length;
@@ -2452,11 +2451,11 @@ export default {
         return;
       }
       try {
-        for (let key in window.waterMap) {
+        for (let key in window.benchMeshWaterMap) {
           if (key == benchId) {
-            window.waterMap[key].scale.set(1.3, 1.3, 1.3);
+            window.benchMeshWaterMap[key].scale.set(1.3, 1.3, 1.3);
           } else {
-            window.waterMap[key].scale.set(1, 1, 1);
+            window.benchMeshWaterMap[key].scale.set(1, 1, 1);
           }
         }
       } catch (e) {}