123

src/views/bim/bimHome/components/ThreeView.vue

@@ -59,31 +59,21 @@ watch(() => props.sceneUrl, val => {
     init();
     loadSence();
 });
+let objArr = [];
+let objM = [];
 // 建筑树点击
 Bus.on('clickBuild', (isParent) => {
     // Todo
     console.log('clickBuild', isParent);
     if (!isParent) {// 点击子级
         var clickName = bimStore().activateTree.clickName;
-        console.log(123, clickName);
-        // 恢复之前被选中模型的材质
-        if (selectedObject && selectedMaterial) {
-            selectedObject.material = selectedMaterial;
-            selectedObject = null;
-            selectedMaterial = null;
-        }
+        cleanColor();
         var Floor = gltfObj.value.scene.getObjectByName(clickName);
-        if (Floor.length > 0) {
-            // 储存被选中的模型和材质
-            selectedObject = Floor;
-            selectedMaterial = selectedObject.material;
-        }
-        console.log(1, Floor);
+
         Floor.traverse(e => {
             e.material = new THREE.MeshLambertMaterial({
                 color: 0x00ff00,
             });
-            nearCamera(e);
         })
 
     }
@@ -107,12 +97,29 @@ onMounted(() => {
     renderScene();
     document.addEventListener("click", onMouseDown);
 });
+
+const cleanColor = () => {
+
+    // 恢复之前被选中模型的材质
+    if (objArr.length > 0 && objM.length > 0) {
+        objArr.forEach((ele, index) => {
+            console.log(objM[index]);
+            ele.material = objM[index]
+        })
+        objArr = [];
+        objM = [];
+    }
+    gltfObj.value.scene.traverse(e => {
+        objArr.push(e);
+        objM.push(e.material);
+    })
+}
 const init = () => {
     scene = new THREE.Scene("#00ffff");
-    // const texture = new THREE.TextureLoader().load(homeIcon);
-    // texture.mapping = THREE.EquirectangularReflectionMapping;
-    // scene.background = texture
-    // scene.environment = texture
+    const texture = new THREE.TextureLoader().load(homeIcon);
+    texture.mapping = THREE.EquirectangularReflectionMapping;
+    scene.background = texture
+    scene.environment = texture
 
     const canvas = document.querySelector("#three");
     var cubeLoader = new THREE.CubeTextureLoader();
@@ -127,11 +134,6 @@ const init = () => {
     // 将摄像机对准场景的中心
     camera.position.set(-192.936, 180.990, -28.179);
     camera.lookAt(scene.position);
-<<<<<<< HEAD
-
-=======
-   
->>>>>>> c61eb163e061fb935e88a57641d1dc70e363d7b5
     // 创建控件对象
     orbit = new OrbitControls(camera, renderer.domElement);
     orbit.autoRotate = true;
@@ -207,17 +209,12 @@ let selectedObject = null;
 let selectedMaterial = null;
 
 const onMouseDown = (event) => {
-    var raycaster = new THREE.Raycaster()
-    // 恢复之前被选中模型的材质
-    if (selectedObject && selectedMaterial) {
-        selectedObject.material = selectedMaterial;
-        selectedObject = null;
-        selectedMaterial = null;
-    }
     // 计算鼠标点击位置的归一化设备坐标
     mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
     mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
 
+    var raycaster = new THREE.Raycaster()
+    cleanColor();
     // 更新射线的起点和方向
     raycaster.setFromCamera(mouse, camera);
     // 计算射线和场景中所有可点击物体的相交情况
@@ -227,7 +224,6 @@ const onMouseDown = (event) => {
         const clickedObject = intersects[0].object;
         // 储存被选中的模型和材质
         selectedObject = clickedObject;
-        selectedMaterial = clickedObject.material;
         // 修改材质为绿色
         selectedObject.material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
         nearCamera(intersects);
@@ -236,6 +232,7 @@ const onMouseDown = (event) => {
 }
 
 const nearCamera = (intersects) => {
+    console.log(5555, intersects)
     // 拉近场景
     if (!intersects[0]) {
         return;
@@ -260,6 +257,7 @@ const nearCamera = (intersects) => {
 const toHomeView = () => {
     camera.position.set(-192.936, 180.990, -28.179);
     camera.lookAt(scene.position);
+    cleanColor();
 }
 // 返回主页
 const toHomeView1 = () => {