fl-web-component 1.1.9 → 1.1.11

package/packages/components/com-graphics/index.vue

@@ -21,7 +21,11 @@
     threeMeasure,
     modelGroup,
     gui,
-    animateId, scenePass, outlineComposer, renderTarget, sceneClock
+    animateId,
+    scenePass,
+    outlineComposer,
+    renderTarget,
+    sceneClock,
   ] = (function* (v) {
     while (true) yield v;
   })(null);
@@ -48,19 +52,21 @@
     while (true) yield v;
   })(true);
 
-  var clippingMesh = [], modelActive = [], modelActions = []
+  var clippingMesh = [],
+    modelActive = [],
+    modelActions = [];
   var removeSpeed = 200,
     upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
   var roamConfig = {
     loop: false,
     speed: 0, // 最大值为3
-    name: ''
-  }
+    name: '',
+  };
   var guiParams = {
-    'x轴': 0,
-    'y轴': 0,
-    'z轴': 0,
-  }
+    x轴: 0,
+    y轴: 0,
+    z轴: 0,
+  };
   //  绘制对象映射实例表
   import CameraControls from 'camera-controls';
   import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
@@ -68,7 +74,7 @@
   import { CSS2DRenderer } from 'three/examples/jsm/renderers/CSS2DRenderer';
   import { PointerLockControls } from 'three/examples/jsm/controls/PointerLockControls.js';
   import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
-  import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
+  import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js';
   import MeasureDistance from '@/utils/threejs/measure-distance.js';
   import MeasureArea from '@/utils/threejs/measure-area.js';
   import MeasureAngle from '@/utils/threejs/measure-angle.js';
@@ -90,8 +96,7 @@
       },
     },
     data() {
-      return {
-      };
+      return {};
     },
     created() {
       CameraControls.install({ THREE: this.THREE });
@@ -103,8 +108,8 @@
         minFilter: this.THREE.LinearFilter,
         magFilter: this.THREE.LinearFilter,
         format: this.THREE.RGBAFormat,
-        stencilBuffer: true
-      })
+        stencilBuffer: true,
+      });
     },
     mounted() {
       instructions = document.getElementById('fl-model');
@@ -147,7 +152,7 @@
           45,
           window.innerWidth / window.innerHeight,
           0.1,
-          10000
+          100000
         );
         camera.position.set(0, 100, 150);
       },
@@ -187,10 +192,19 @@
         }
         const { instances, drawObjs } = parseData(data);
         if (instances.length > 0) {
-          modelGroup = handleInstancedMeshModel(instances, drawObjs, '', scene, color, meshNameConfig);
+          modelGroup = handleInstancedMeshModel(
+            instances,
+            drawObjs,
+            '',
+            scene,
+            color,
+            meshNameConfig
+          );
           let modelBox3 = new this.THREE.Box3();
           modelBox3.expandByObject(modelGroup);
-          let modelWorldPs = new this.THREE.Vector3().addVectors(modelBox3.max, modelBox3.min).multiplyScalar(0.5)
+          let modelWorldPs = new this.THREE.Vector3()
+            .addVectors(modelBox3.max, modelBox3.min)
+            .multiplyScalar(0.5);
           scene.add(modelGroup);
           // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
           const mat4 = new this.THREE.Matrix4();
@@ -198,33 +212,37 @@
           modelGroup.applyMatrix4(mat4);
           modelGroup.traverse(child => {
             if (child.isMesh) {
-              const json = this.getMeshCenterAndVolume(child)
+              const json = this.getMeshCenterAndVolume(child);
               let meshBox3 = new this.THREE.Box3();
               meshBox3.setFromObject(child);
               // 获取每个mesh的中心点，爆炸方向为爆炸中心点指向mesh中心点
-              let worldPs = new this.THREE.Vector3().addVectors(meshBox3.max, meshBox3.min).multiplyScalar(0.5)
-              if (isNaN(worldPs.x)) return
+              let worldPs = new this.THREE.Vector3()
+                .addVectors(meshBox3.max, meshBox3.min)
+                .multiplyScalar(0.5);
+              if (isNaN(worldPs.x)) return;
               // 计算爆炸方向
-              child.worldDir = new this.THREE.Vector3().subVectors(worldPs, modelWorldPs).normalize()
+              child.worldDir = new this.THREE.Vector3()
+                .subVectors(worldPs, modelWorldPs)
+                .normalize();
               // 保存初始坐标
-              child.userData.center = json.center
-              child.userData.worldPs = worldPs
-              child.userData.oldPs = child.getWorldPosition(new this.THREE.Vector3())
-              child.userData.box = json.box
-              child.userData.position = new this.THREE.Vector3().copy(child.position)
+              child.userData.center = json.center;
+              child.userData.worldPs = worldPs;
+              child.userData.oldPs = child.getWorldPosition(new this.THREE.Vector3());
+              child.userData.box = json.box;
+              child.userData.position = new this.THREE.Vector3().copy(child.position);
               child.userData.translate = {
                 x: 0,
                 y: 0,
-                z: 0
-              }
+                z: 0,
+              };
               child.userData.rotate = {
                 x: 0,
                 y: 0,
-                z: 0
-              }
-              child.userData.modelWorldPs = modelWorldPs
+                z: 0,
+              };
+              child.userData.modelWorldPs = modelWorldPs;
             }
-          })
+          });
           // this.compileShader();
           // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
           this.setModelCenter(modelGroup);
@@ -233,15 +251,15 @@
       },
       // 获取mesh的中心点
       getMeshCenterAndVolume(mesh) {
-        const box = new this.THREE.Box3().setFromObject(mesh)
-        const volume = box.getSize(new this.THREE.Vector3())
-        const geometry = mesh.geometry
-        geometry.computeBoundingBox()
-        const center = geometry.boundingBox.getCenter(new this.THREE.Vector3())
+        const box = new this.THREE.Box3().setFromObject(mesh);
+        const volume = box.getSize(new this.THREE.Vector3());
+        const geometry = mesh.geometry;
+        geometry.computeBoundingBox();
+        const center = geometry.boundingBox.getCenter(new this.THREE.Vector3());
         return {
-          'center': center,
-          'box': volume
-        }
+          center: center,
+          box: volume,
+        };
       },
       compileShader() {
         scene.traverse(child => {
@@ -411,23 +429,34 @@
                 targetObj.forEach(children => {
                   const index = children.userData.instanceIndex;
                   if (ele.attr[key]) {
-                    const restoreMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix);
+                    const restoreMatrix = new this.THREE.Matrix4().copy(
+                      children.userData.copyMatrix
+                    );
                     children.setMatrixAt(index, restoreMatrix);
                   } else {
-                    const offsetMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
+                    const offsetMatrix = new this.THREE.Matrix4()
+                      .copy(children.userData.copyMatrix)
+                      .makeTranslation(9999999, 9999999, 9999999);
                     children.setMatrixAt(index, offsetMatrix);
                   }
                   children.instanceMatrix.needsUpdate = true;
                 });
                 break;
               case 'opacity':
-                obj.material.opacity = ele.attr[key];
-                obj.material.transparent = true;
+                // obj.material.opacity = ele.attr[key];
+                // obj.material.transparent = true;
+                targetObj.forEach(children => {
+                  if (children.isMesh) {
+                    const opacity = children.geometry.attributes.opacity.array;
+                    opacity[children.userData.instanceIndex] = ele.attr[key];
+                    children.geometry.attributes.opacity.needsUpdate = true;
+                  }
+                });
                 break;
-              case 'position': 
+              case 'position':
                 targetObj.forEach(children => {
-                  children.position.set(ele.attr[key].x, ele.attr[key].y, ele.attr[key].z)
-                })
+                  children.position.set(ele.attr[key].x, ele.attr[key].y, ele.attr[key].z);
+                });
                 break;
             }
           }
@@ -436,7 +465,7 @@
       },
       // 恢复模型原来的状态
       updateWholeProperty() {
-        throw(new Error('该方法已暂停使用，请使用restore方法。'))
+        throw new Error('该方法已暂停使用，请使用restore方法。');
         // if (scene) {
         //   scene.traverse(obj => {
         //     if (obj instanceof this.THREE.Mesh) {
@@ -470,14 +499,25 @@
                     }
                   });
                   break;
-                case 'visible': 
+                case 'visible':
                   obj.forEach(children => {
                     const index = children.userData.instanceIndex;
-                    const restoreMatrix = new this.THREE.Matrix4().copy(children.userData.copyMatrix);
+                    const restoreMatrix = new this.THREE.Matrix4().copy(
+                      children.userData.copyMatrix
+                    );
                     children.setMatrixAt(index, restoreMatrix);
-                    children.instanceMatrix.needsUpdate = true
+                    children.instanceMatrix.needsUpdate = true;
                   });
                   break;
+                case 'opacity':
+                  obj.forEach(children => {
+                    if (children.isMesh) {
+                      const opacity = children.geometry.attributes.opacity.array;
+                      opacity[children.userData.instanceIndex] =
+                        children.material.userData.nOpacity;
+                      children.geometry.attributes.opacity.needsUpdate = true;
+                    }
+                  });
               }
             }
           }
@@ -515,7 +555,10 @@
             for (const key in params.attr) {
               switch (key) {
                 case 'color':
-                  child.setColorAt(obj.userData.instanceIndex, new this.THREE.Color(params.attr[key]));
+                  child.setColorAt(
+                    obj.userData.instanceIndex,
+                    new this.THREE.Color(params.attr[key])
+                  );
                   child.instanceColor.needsUpdate = true;
                   break;
                 case 'visible':
@@ -529,7 +572,7 @@
               child.material.needsUpdate = true;
             }
           }
-        })
+        });
       },
       // 相机定位
       /*
@@ -555,7 +598,9 @@
         box: {x: 0, y: 0, z: 0}
       */
       locateByCenterBox(center, box) {
-        let cameraCenter = new this.THREE.Vector3(center.x, center.y, center.z).addScalar((Math.max(box.x, box.y, box.z)));
+        let cameraCenter = new this.THREE.Vector3(center.x, center.y, center.z).addScalar(
+          Math.max(box.x, box.y, box.z)
+        );
         cameraControls.setLookAt(
           cameraCenter.x,
           cameraCenter.y,
@@ -564,7 +609,7 @@
           center.y,
           center.z,
           true
-        )
+        );
       },
       // 添加广告牌
       /*
@@ -636,28 +681,28 @@
               item.clear();
             }
             scene.remove(item);
-          })
-          scene.clear()
+          });
+          scene.clear();
         }
       },
       // 销毁场景 释放内存
       destroyScene() {
-        cancelAnimationFrame(animateId)
-          if (scene) {
-            scene.traverse(child => {
-              child.material && child.material.dispose()
-              child.geometry && child.geometry.dispose()
-              child = null
-            })
-            scene.clear()
-            scene = null
-          }
-          renderer.forceContextLoss()
-          renderer.dispose()
-          camera = null
-          cameraControls = null
-          renderer.domElement = null
-          renderer = null
+        cancelAnimationFrame(animateId);
+        if (scene) {
+          scene.traverse(child => {
+            child.material && child.material.dispose();
+            child.geometry && child.geometry.dispose();
+            child = null;
+          });
+          scene.clear();
+          scene = null;
+        }
+        renderer.forceContextLoss();
+        renderer.dispose();
+        camera = null;
+        cameraControls = null;
+        renderer.domElement = null;
+        renderer = null;
       },
       // 绘制曲线
       /*
@@ -724,7 +769,7 @@
           clock = new this.THREE.Clock();
         }
       },
-      // 
+      //
       // 开启漫游
       /*
         参数为Object
@@ -738,12 +783,12 @@
         roamConfig = {
           loop: params.loop,
           speed: params.speed,
-         }
+        };
         this.drawTextureCurve({
           name: params.name,
           path: params.path,
         });
-        roaming = true
+        roaming = true;
       },
       // 更新漫游的配置
       /*
@@ -751,7 +796,7 @@
       */
       updateRoamConfig(params) {
         for (let key in params) {
-          roamConfig[key] = params[key]
+          roamConfig[key] = params[key];
         }
       },
       // 结束/退出漫游
@@ -763,9 +808,9 @@
           loop: false,
           speed: 0,
           name: '',
-        }
-        roaming = false
-        lineTexture = null
+        };
+        roaming = false;
+        lineTexture = null;
       },
       // 相机跟随轨道
       cameraTrack() {
@@ -846,15 +891,19 @@
         renderer.clippingPlanes = clippingPlanes;
         if (flag) {
           guiParams = {
-            'x轴': clippingPlanes[0].constant,
-            'y轴': clippingPlanes[2].constant,
-            'z轴': clippingPlanes[1].constant
-          }
-          this.addClippingGui('全局剖切', {
-            x: min.x,
-            y: min.z,
-            z: min.y
-          }, clippingPlanes)
+            x轴: clippingPlanes[0].constant,
+            y轴: clippingPlanes[2].constant,
+            z轴: clippingPlanes[1].constant,
+          };
+          this.addClippingGui(
+            '全局剖切',
+            {
+              x: min.x,
+              y: min.z,
+              z: min.y,
+            },
+            clippingPlanes
+          );
         }
         return {
           min: min,
@@ -880,17 +929,17 @@
       // 取消全局剖切
       cancelGlobalClipping() {
         guiParams = {
-          'x轴': 0,
-          'y轴': 0,
-          'z轴': 0
+          x轴: 0,
+          y轴: 0,
+          z轴: 0,
         };
         renderer.clippingPlanes = Object.freeze([]);
         gui && gui.destroy();
       },
       // 单个实体的剖切/ 局部剖切 obj 实体对象 flag 代表是否使用图形组件自带的剖切面板 默认为true
       setLocalClipping(obj, flag = true) {
-        clippingMesh.splice(0)
-        clippingMesh.push(obj)
+        clippingMesh.splice(0);
+        clippingMesh.push(obj);
         renderer.localClippingEnabled = true;
         // mesh的boundingBox 可以获取到该对象位置的最大最小值 但是在这里我们需要把y、z轴互换
         const boundingBox = new this.THREE.Box3().copy(obj.boundingBox);
@@ -905,21 +954,25 @@
         // 将局部剖切的对象记录下来
         if (flag) {
           guiParams = {
-            'x轴': clippingPlanes[0].constant,
-            'y轴': clippingPlanes[2].constant,
-            'z轴': clippingPlanes[1].constant
-          }
-          this.addClippingGui('局部剖切', {
-            x: Math.floor(boundingBox.min.x),
-            y: Math.floor(boundingBox.min.z),
-            z: Math.floor(boundingBox.min.y)
-          }, obj.material.clippingPlanes)
+            x轴: clippingPlanes[0].constant,
+            y轴: clippingPlanes[2].constant,
+            z轴: clippingPlanes[1].constant,
+          };
+          this.addClippingGui(
+            '局部剖切',
+            {
+              x: Math.floor(boundingBox.min.x),
+              y: Math.floor(boundingBox.min.z),
+              z: Math.floor(boundingBox.min.y),
+            },
+            obj.material.clippingPlanes
+          );
           // cube.material.clippingPlanes
-        };
+        }
         return {
           min: boundingBox.min,
           max: boundingBox.max,
-        }
+        };
       },
       // 更新局部剖切的值
       /*
@@ -932,7 +985,7 @@
           y: 1,
           z: 2,
         };
-        let obj = clippingMesh[clippingMesh.length - 1]
+        let obj = clippingMesh[clippingMesh.length - 1];
         for (const key in params) {
           obj.material.clippingPlanes[axis[key]].constant = params[key];
           obj.material.needsUpdate = true;
@@ -942,33 +995,45 @@
       // 取消局部/单个实体的剖切
       cancelLocalClipping() {
         guiParams = {
-          'x轴': 0,
-          'y轴': 0,
-          'z轴': 0
+          x轴: 0,
+          y轴: 0,
+          z轴: 0,
         };
         gui && gui.destroy();
         clippingMesh.forEach(item => {
-          item.material.clippingPlanes = Object.freeze([])
-          item.material.needsUpdate = true
-        })
-        clippingMesh.splice(0)
+          item.material.clippingPlanes = Object.freeze([]);
+          item.material.needsUpdate = true;
+        });
+        clippingMesh.splice(0);
       },
       // 添加剖切轴工具
       addClippingGui(title, minValue, objClipp1, objClipp2) {
         gui = new GUI({
-          title: title
-        })
-        gui.add(guiParams, 'x轴').min(minValue.x).max(Math.abs(guiParams['x轴'])).onChange(d => {
-          objClipp1[0].constant = d
-          objClipp2 && (objClipp2[0].constant = d)
-        })
-        gui.add(guiParams, 'y轴').min(minValue.y).max(Math.abs(guiParams['y轴'])).onChange(d => {
-          objClipp1[2].constant = d
-          objClipp2 && (objClipp2[2].constant = d)
-        })
-        gui.add(guiParams, 'z轴').min(minValue.z).max(Math.abs(guiParams['z轴'])).onChange(d => {
-          objClipp1[1].constant = d
-        })
+          title: title,
+        });
+        gui
+          .add(guiParams, 'x轴')
+          .min(minValue.x)
+          .max(Math.abs(guiParams['x轴']))
+          .onChange(d => {
+            objClipp1[0].constant = d;
+            objClipp2 && (objClipp2[0].constant = d);
+          });
+        gui
+          .add(guiParams, 'y轴')
+          .min(minValue.y)
+          .max(Math.abs(guiParams['y轴']))
+          .onChange(d => {
+            objClipp1[2].constant = d;
+            objClipp2 && (objClipp2[2].constant = d);
+          });
+        gui
+          .add(guiParams, 'z轴')
+          .min(minValue.z)
+          .max(Math.abs(guiParams['z轴']))
+          .onChange(d => {
+            objClipp1[1].constant = d;
+          });
       },
       // 开启第一视角
       startFirstPer() {
@@ -1123,7 +1188,7 @@
       // 返回主视角/恢复相机初始状态
       home() {
         if (roaming) {
-          this.endRoam()
+          this.endRoam();
         }
         cameraControls.reset(true);
         cameraControls.update(0);
@@ -1240,7 +1305,9 @@
         // 隔离 将目标实体以外的实体隐藏掉
         scene.traverse(item => {
           if (item.isMesh && item.name !== object.name) {
-            const offsetMatrix = new this.THREE.Matrix4().copy(item.userData.copyMatrix).makeTranslation(9999999, 9999999, 9999999);
+            const offsetMatrix = new this.THREE.Matrix4()
+              .copy(item.userData.copyMatrix)
+              .makeTranslation(9999999, 9999999, 9999999);
             item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
             item.instanceMatrix.needsUpdate = true;
           }
@@ -1282,30 +1349,30 @@
       },
       //  添加自定义模型, 暂时只支持glb、gltf格式
       addCustomModel(name, position, url, scale = 1, immediately = false, callback) {
-        const loader = new GLTFLoader()
+        const loader = new GLTFLoader();
         let locationModel = null;
-        loader.load(url, (gltf) => {
-          locationModel = gltf.scene
-          locationModel.scale.set(scale, scale, scale)
-          locationModel.updateMatrixWorld()
+        loader.load(url, gltf => {
+          locationModel = gltf.scene;
+          locationModel.scale.set(scale, scale, scale);
+          locationModel.updateMatrixWorld();
           if (immediately) {
-            cameraControls.fitToSphere(gltf.scene, true)
+            cameraControls.fitToSphere(gltf.scene, true);
           }
           // 动画混合器
           // 不参与裁剪
           locationModel.userData.cull = false;
           locationModel.name = name;
-          scene.add(locationModel)
-          locationModel.position.copy(new this.THREE.Vector3(position.x, position.y, position.z))
+          scene.add(locationModel);
+          locationModel.position.copy(new this.THREE.Vector3(position.x, position.y, position.z));
           if (gltf.animations.length > 0) {
             let actionMixer = new this.THREE.AnimationMixer(gltf.scene);
-            const walkActive = actionMixer.clipAction(gltf.animations[0])
-            walkActive.play()
+            const walkActive = actionMixer.clipAction(gltf.animations[0]);
+            walkActive.play();
             modelActive.push(walkActive);
             modelActions.push(actionMixer);
           }
-          callback && callback()
-        })
+          callback && callback();
+        });
       },
       // 删除添加的自定义模型
       removeCustomModel(name) {
@@ -1316,25 +1383,25 @@
             modelActions[index].uncacheRoot(item);
             modelActions[index].uncacheRoot(modelActive[index]);
           }
-          item.traverse((child) => {
+          item.traverse(child => {
             if (child instanceof this.THREE.Mesh) {
-              child.geometry.dispose()
-              child.material.dispose()
+              child.geometry.dispose();
+              child.material.dispose();
             }
-          })
+          });
           scene.remove(item);
-        })
+        });
         modelActions.splice(0);
         modelActive.splice(0);
       },
       // 修改天空背景
       skyBoxScene(url) {
-        const textureCube = new this.THREE.CubeTextureLoader().load(url)
-        scene.background = textureCube
+        const textureCube = new this.THREE.CubeTextureLoader().load(url);
+        scene.background = textureCube;
       },
       // 清除天空背景
       clearSkyBoxScene() {
-        scene.background = null
+        scene.background = null;
       },
       // 下雨模拟
       sceneSimu(type) {
@@ -1342,13 +1409,19 @@
           outlineComposer = new EffectComposer(renderer, renderTarget);
           outlineComposer.addPass(new RenderPass(scene, camera));
         }
-        if(type === 'rain') {
+        if (type === 'rain') {
           scenePass = new ShaderPass(RainShader);
-          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(window.innerWidth, window.innerHeight);
+          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
+            window.innerWidth,
+            window.innerHeight
+          );
           outlineComposer.addPass(scenePass);
         } else if (type === 'snow') {
           scenePass = new ShaderPass(SnowShader);
-          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(window.innerWidth, window.innerHeight);
+          scenePass.uniforms['iResolution'].value = new this.THREE.Vector2(
+            window.innerWidth,
+            window.innerHeight
+          );
           outlineComposer.addPass(scenePass);
         }
       },
@@ -1366,13 +1439,13 @@
           if (modelActions.length > 0) {
             modelActions.forEach(item => {
               item.update(timeStamp);
-            })
+            });
           }
           cameraControls.enabled && cameraControls.update(timeStamp);
           this.cameraTrack();
           this.firstPerspective();
           if (scenePass) {
-            let d = sceneClock.getDelta()
+            let d = sceneClock.getDelta();
             scenePass.uniforms['iTime'].value += d;
           }
           labelRenderer.render(scene, camera);