fl-web-component 1.4.8 → 2.0.0-beta.1

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

@@ -0,0 +1,1679 @@
+<template>
+  <div id="fl-model"></div>
+</template>
+<script>
+  var [
+    renderer,
+    scene,
+    camera,
+    cameraControls,
+    instructions,
+    raycaster,
+    mouse,
+    labelRenderer,
+    lineTexture,
+    curve,
+    downRaycaster,
+    velocity,
+    direction,
+    clock,
+    pointControls,
+    threeMeasure,
+    modelGroup,
+    gui,
+    animateId,
+    scenePass,
+    outlineComposer,
+    renderTarget,
+    sceneClock,
+    mat4,
+  ] = (function* (v) {
+    while (true) yield v;
+  })(null);
+
+  var [lastTime, firstTime, fpsClock, timeStamp, progress] = (function* (v) {
+    while (true) yield v;
+  })(0);
+  var singleFrameTime = 1 / 30;
+
+  // 双缓冲渲染
+  var postScene, postCamera, postTarget
+
+  var [
+    roaming,
+    firstPerSign,
+    canJump,
+    moveForward,
+    moveBackward,
+    moveLeft,
+    moveRight,
+    measureFlag,
+    renderEnabled,
+    sceneChangeFlag,
+  ] = (function* (v) {
+    while (true) yield v;
+  })(false);
+
+  var [spaceUp] = (function* (v) {
+    while (true) yield v;
+  })(true);
+
+  var clippingMesh = [],
+    modelActive = [],
+    modelActions = [];
+  var removeSpeed = 200,
+    upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
+  var roamConfig = {
+    loop: false,
+    speed: 0, // 最大值为3
+    name: '',
+  };
+  var guiParams = {
+    x轴: 0,
+    y轴: 0,
+    z轴: 0,
+  };
+  //  绘制对象映射实例表
+  import CameraControls from 'camera-controls';
+  import { RoomEnvironment } from 'three/examples/jsm/environments/RoomEnvironment.js';
+  import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
+  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 MeasureDistance from '@/utils/threejs/measure-distance.js';
+  import MeasureArea from '@/utils/threejs/measure-area.js';
+  import MeasureAngle from '@/utils/threejs/measure-angle.js';
+  import { parseData } from '@/utils/flgltf-parser';
+  import { handleInstancedMeshModel } from '@/utils/instance-parser';
+  import { RainShader } from '@/utils/threejs/rain-shader.js';
+  import { SnowShader } from '@/utils/threejs/snow-shader.js';
+  import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+  import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+  import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+  export default {
+    name: 'FlModel',
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {};
+    },
+    created() {
+      CameraControls.install({ THREE: this.THREE });
+      mat4 = new this.THREE.Matrix4();
+      mat4.makeRotationX(-Math.PI / 2);
+      fpsClock = new this.THREE.Clock();
+      raycaster = new this.THREE.Raycaster();
+      sceneClock = new this.THREE.Clock();
+      mouse = new this.THREE.Vector2();
+      renderTarget = new this.THREE.WebGLRenderTarget(window.innerWidth, window.innerHeight, {
+        minFilter: this.THREE.LinearFilter,
+        magFilter: this.THREE.LinearFilter,
+        format: this.THREE.RGBAFormat,
+        stencilBuffer: true,
+      });
+    },
+    mounted() {
+      instructions = document.getElementById('fl-model');
+      this.initRender();
+      this.initScene();
+      this.initCamera();
+      this.initControl();
+      this.initLight();
+      this.initLabelRender();
+      this.exportParmas();
+      // 判断是设备是手机还是电脑
+      let isMobileDevice = this.isMobileDevice();
+      if (isMobileDevice) {
+        renderer.domElement.addEventListener('pointerup', this.mouseClick, false);
+        renderer.domElement.addEventListener('pointerdown', this.mouseDown, false);
+      } else {
+        renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+        renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      }
+      // 新增鼠标滑过事件
+      cameraControls.addEventListener('wake', () => {
+        renderEnabled = true;
+      });
+      cameraControls.addEventListener('sleep', () => {
+        renderEnabled = false;
+        scene.renderStage.init();
+      });
+      this.animate();
+    },
+    methods: {
+      // 判断是设备是手机还是电脑
+      isMobileDevice() {
+        const userAgent = navigator.userAgent || navigator.vendor || window.opera;
+        if (/windows phone/i.test(userAgent)) {
+          return true;
+        }
+        if (/android/i.test(userAgent)) {
+          return true;
+        }
+        if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) {
+          return true;
+        }
+        return false;
+      },
+      initRender() {
+        renderer = new this.THREE.WebGLRenderer({
+          antialias: true,
+          alpha: true,
+          logarithmicDepthBuffer: true,
+          powerPreference: 'high-performance',
+          preserveDrawingBuffer: true, //保留图形缓冲区 TODO 临时截图使用
+        });
+        renderer.setPixelRatio(window.devicePixelRatio);
+        const rect = instructions.getBoundingClientRect();
+        renderer.setSize(rect.width, rect.height);
+        renderer.domElement.id = 'three-model';
+        renderer.shadowMap.enabled = true;
+        // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
+        renderer.outputEncoding = this.THREE.sRGBEncoding;
+        instructions.appendChild(renderer.domElement);
+        renderer.setClearAlpha(0);
+
+        // 与校审截图功能冲突，暂时先注释掉
+        // -----------
+        // renderer.autoClear = false;
+        // renderer.autoClearColor = false;
+        // renderer.autoClearDepth = false;
+        // renderer.autoClearStencil = false;
+        // -----------
+      },
+      initSenceRenderTarget(width, height) {
+        postTarget = new this.THREE.WebGLRenderTarget(width, height, 1);
+        postScene.background = postTarget.texture; // new this.THREE.Color("rgb(0, 255, 0)")//
+        // postScene.background = new this.THREE.TextureLoader().load( '/src/views/model-three/land_ocean_ice_cloud_2048.jpg', null, null, ()=>{console.log("loaderror")} );
+      },
+      initScene() {
+        modelGroup = new this.THREE.Group();
+        scene = new this.THREE.Scene();
+        scene.renderStage = new this.THREE.RenderStage();
+        scene.userData.recordEntity = [];
+        postScene = new this.THREE.Scene();
+      },
+      initCamera() {
+        camera = new this.THREE.PerspectiveCamera(
+          45,
+          window.innerWidth / window.innerHeight,
+          0.1,
+          1000000000
+        );
+        camera.position.set(0, 100, 150);
+        this.initSenceRenderTarget(
+          window.innerWidth * window.devicePixelRatio * 2,
+          window.innerHeight * window.devicePixelRatio * 2
+        );
+        postCamera = new this.THREE.OrthographicCamera(0.5, -0.5, 0.5, -0.5, 0.01, 1000); //window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 0.1, 1000)
+        postCamera.position.set(0, 0, 150);
+        postCamera.lookAt(scene.position);
+      },
+      initControl() {
+        // 初始化控件
+        cameraControls = new CameraControls(camera, renderer.domElement);
+        cameraControls.dollyToCursor = true;
+        cameraControls.smoothTime = 0.1;
+        cameraControls.draggingSmoothTime = 0.05;
+        cameraControls.truckSpeed = 2.0;
+        cameraControls.infinityDolly = true;
+        cameraControls.minDistance = 4;
+      },
+      // 初始化光源
+      initLight() {
+        const pmremGenerator = new this.THREE.PMREMGenerator(renderer);
+        scene.environment = pmremGenerator.fromScene(new RoomEnvironment(), 0.04).texture;
+      },
+      // 初始化文字画布
+      initLabelRender() {
+        labelRenderer = new CSS2DRenderer();
+        const rect = instructions.getBoundingClientRect();
+        labelRenderer.setSize(rect.width, rect.height);
+        labelRenderer.domElement.style.position = 'absolute';
+
+        labelRenderer.domElement.style.top = `${rect.top}px`;
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        instructions.appendChild(labelRenderer.domElement);
+      },
+      // 根据模型数据绘制模型实体 业务平台可调用此方法加载模型
+      /*
+        参数：data 模型数据
+          color: '' 初始化模型的颜色 在业务方 有这个需求
+          meshNameConfig: {}
+      */
+      async drawModel(data, color = '', meshNameConfig = {}) {
+        if (Object.keys(data).length === 0) {
+          return;
+        }
+        const { instances, drawObjs } = parseData(data);
+        if (instances.length > 0) {
+          await handleInstancedMeshModel(
+            modelGroup,
+            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);
+          scene.add(modelGroup);
+          // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
+          modelGroup.applyMatrix4(mat4);
+          modelGroup.updateMatrixWorld();
+          modelGroup.traverse(child => {
+            if (child.isMesh) {
+              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;
+              // 计算爆炸方向
+              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.translate = {
+                x: 0,
+                y: 0,
+                z: 0,
+              };
+              child.userData.rotate = {
+                x: 0,
+                y: 0,
+                z: 0,
+              };
+              child.userData.modelWorldPs = modelWorldPs;
+            }
+          });
+          // cameraControls.fitToSphere(scene, true); // TODO 待处理，先用 setModelCenter 进行定位
+          this.setModelCenter(modelGroup);
+          this.$emit('modelLoaded');
+          renderEnabled = true;
+          sceneChangeFlag = true;
+          // cameraControls.saveState();
+        }
+      },
+      // 获取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());
+        return {
+          center: center,
+          box: volume,
+        };
+      },
+      mouseDown(event) {
+        const intersects = this.getRaycasterObjects(event);
+        firstTime = new Date().getTime();
+        let params = {
+          event,
+          firstTime,
+        };
+        intersects.length &&
+          (params.v3Position = {
+            x: intersects[0].point.x,
+            y: intersects[0].point.y,
+            z: intersects[0].point.z,
+          });
+        this.$emit('leftMouseDown', params);
+      },
+      getRaycasterObjects(event) {
+        // 获取元素在页面中的偏移位置
+        const rect = renderer.domElement.getBoundingClientRect();
+        const x = event.clientX - rect.left;
+        const y = event.clientY - rect.top;
+
+        // mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
+        // mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+        mouse.x = (x / rect.width) * 2 - 1;
+        mouse.y = -(y / rect.height) * 2 + 1;
+        raycaster.setFromCamera(mouse, camera);
+        return raycaster.intersectObjects(scene.children, true);
+      },
+      mouseClick(event) {
+        // 在测量模式下，不进行事件暴露
+        if (!measureFlag) {
+          lastTime = new Date().getTime();
+          if (lastTime - firstTime < 300) {
+            const intersects = this.getRaycasterObjects(event);
+            let params = {};
+            let cameraData = {
+              position: {
+                x: cameraControls.camera.position.x,
+                y: cameraControls.camera.position.y,
+                z: cameraControls.camera.position.z,
+              },
+              lookAt: {
+                heading: cameraControls._target.x,
+                pitch: cameraControls._target.y,
+                roll: cameraControls._target.z,
+              },
+            };
+            if (intersects.length > 0) {
+              params = {
+                objects: [intersects[0].object],
+                mousePosition: { x: event.clientX, y: event.clientY },
+                camera: cameraData,
+                v3Position: {
+                  x: intersects[0].point.x,
+                  y: intersects[0].point.y,
+                  z: intersects[0].point.z,
+                },
+              };
+            } else {
+              params = {
+                objects: [],
+                mousePosition: { x: event.clientX, y: event.clientY },
+                camera: cameraData,
+                v3Position: {
+                  x: -1,
+                  y: -1,
+                  z: -1,
+                },
+              };
+            }
+            if (event.button === 0) {
+              this.$emit('leftClick', params);
+            } else if (event.button === 2) {
+              this.$emit('rightClick', params);
+            }
+          }
+        }
+      },
+      // 窗口发生改变时, 更新渲染器与相机的大小
+      resize(width, height) {
+        if (camera) {
+          camera.aspect = width / height;
+          camera.updateProjectionMatrix();
+          renderer.setSize(width, height, true);
+          labelRenderer.setSize(width, height);
+          // this.timeRender()
+          // 这里也要更新测量
+          if (threeMeasure) {
+            threeMeasure.updateParams(width, height);
+          }
+        }
+      },
+      setModelCenter(mesh) {
+        const box3 = new this.THREE.Box3();
+        mesh.traverseVisible(function (object) {
+          // 3. 只处理有几何体的网格 (Mesh)
+          if (object.isMesh) {
+            // 4. 使用 expandByObject 扩展包围盒
+            // 这个方法会计算 object 的世界坐标包围盒，并将其合并到 correctBoundingBox 中
+            box3.expandByObject(object);
+          }
+        });
+        // box3.setFromObject(mesh);
+        const center = new this.THREE.Vector3();
+        box3.getCenter(center);
+        const size = box3.getSize(new this.THREE.Vector3());
+        camera.position.set(center.x, center.y + size.y, center.z + size.z / 2);
+        camera.lookAt(new this.THREE.Vector3(center.x, center.y, center.z));
+        cameraControls.setLookAt(
+          center.x,
+          center.y + size.y,
+          center.z + size.z / 2,
+          center.x,
+          center.y,
+          center.z,
+          true
+        );
+        cameraControls.update(0);
+        camera.updateProjectionMatrix();
+        cameraControls.saveState();
+      },
+      // 修改指定模型实体属性
+      /**
+       * 参数内容{
+       * list: [{
+       *   name: '', // 实体的name值'
+       *   attr: {
+       *    'color/visible/opacity': '颜色值/(true / false)/(0-1)'
+       *   }, 需要修改属性的列表
+       * }] // 需要更改实体属性的数据
+       * It can be a CSS-style string. For example:
+       * 'rgb(250, 0,0)'
+       * 'rgb(100%,0%,0%)'
+       * 'hsl(0, 100%, 50%)'
+       * '#ff0000'
+       * '#f00'
+       * 'red'
+       * }
+       */
+      updateProperty(list) {
+        for (let index = 0; index < list.length; index++) {
+          let ele = list[index];
+          let targetObj = this.getObjectByName(ele.name);
+          for (const key in ele.attr) {
+            switch (key) {
+              case 'color':
+                targetObj.forEach(children => {
+                  if (children.isMesh) {
+                    children.setColorAt(
+                      children.userData.instanceIndex,
+                      new this.THREE.Color(ele.attr[key])
+                    );
+                    children.instanceColor.needsUpdate = true;
+                  }
+                });
+                break;
+              case 'visible':
+                targetObj.forEach(children => {
+                  const index = children.userData.instanceIndex;
+                  if (ele.attr[key]) {
+                    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);
+                    children.setMatrixAt(index, offsetMatrix);
+                  }
+                  children.instanceMatrix.needsUpdate = true;
+                });
+                break;
+              case 'opacity':
+                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':
+                targetObj.forEach(children => {
+                  children.position.set(ele.attr[key].x, ele.attr[key].y, ele.attr[key].z);
+                });
+                break;
+            }
+          }
+          // obj.material.needsUpdate = true;
+        }
+      },
+      // 恢复模型原来的状态
+      updateWholeProperty() {
+        throw new Error('该方法已暂停使用，请使用restore方法。');
+        // if (scene) {
+        //   scene.traverse(obj => {
+        //     if (obj instanceof this.THREE.Mesh) {
+        //       // 恢复颜色
+        //       obj.setColorAt(obj.userData.instanceIndex, obj.material.userData.nColor)
+        //       obj.instanceColor.needsUpdate = true
+        //       // 修改可见性
+        //       const restoreMatrix = new this.THREE.Matrix4().copy(obj.userData.copyMatrix);
+        //       obj.setMatrixAt(index, restoreMatrix);
+        //       obj.instanceMatrix.needsUpdate = true;
+        //     }
+        //   });
+        // }
+      },
+      // 清除上一次的属性修改操作 为了方便业务平台参数跟updateProperty方法的参数一样
+      resetProperty(list) {
+        for (let index = 0; index < list.length; index++) {
+          let ele = list[index];
+          let obj = this.getObjectByName(ele.name);
+          if (obj) {
+            for (const key in ele.attr) {
+              switch (key) {
+                case 'color':
+                  obj.forEach(children => {
+                    if (children.isMesh) {
+                      children.setColorAt(
+                        children.userData.instanceIndex,
+                        children.material.userData.nColor
+                      );
+                      children.instanceColor.needsUpdate = true;
+                    }
+                  });
+                  break;
+                case 'visible':
+                  obj.forEach(children => {
+                    const index = children.userData.instanceIndex;
+                    const restoreMatrix = new this.THREE.Matrix4().copy(
+                      children.userData.copyMatrix
+                    );
+                    children.setMatrixAt(index, restoreMatrix);
+                    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;
+                    }
+                  });
+              }
+            }
+          }
+        }
+      },
+      // 定位到模型
+      locateModel(name) {
+        let obj = scene.getObjectByName(name);
+        if (obj) {
+          // cameraControls.fitToSphere(obj.parent, true); // TODO 待处理，先用 setModelCenter 进行定位
+          if (obj.isGroup) {
+            this.setModelCenter(obj);
+          } else if (obj.isMesh) {
+            let center = this.getCenter(obj);
+            let size = this.getSize(obj);
+            this.locateByCenterBox(center, size);
+          }
+        }
+      },
+      // 根据自定义参数修改模型
+      /*
+        自定义参数指的是在调用drawModel时配置的meshNameConfig里面的字段来修改某一类模型实体的属性
+        {
+          customName: '', 自定义字段名称
+          customValue: '' 自定义字段的值
+          attr: {
+            color: '',
+            opacity: 0 -1,
+            visiable: true/false
+          }
+        }
+      */
+      updatePropertyByCustom(params) {
+        scene.traverse(child => {
+          if (child.isMesh && child.userData[params.customName] === params.customValue) {
+            for (const key in params.attr) {
+              switch (key) {
+                case 'color':
+                  child.setColorAt(
+                    obj.userData.instanceIndex,
+                    new this.THREE.Color(params.attr[key])
+                  );
+                  child.instanceColor.needsUpdate = true;
+                  break;
+                case 'visible':
+                  child.material.visible = params.attr[key];
+                  break;
+                case 'opacity':
+                  child.material.opacity = params.attr[key];
+                  child.material.transparent = true;
+                  break;
+              }
+              child.material.needsUpdate = true;
+            }
+          }
+        });
+      },
+      // 相机定位
+      /*
+        定位参数：x: 相机的x位置, y: 相机的y位置, z: 相机的z位置
+        heading, pitch, roll
+        视点定位可直接使用此方法
+      */
+      cameraLocation(params) {
+        cameraControls.setLookAt(
+          params.x,
+          params.y,
+          params.z,
+          params.heading,
+          params.pitch,
+          params.roll,
+          true
+        );
+        cameraControls.update(0);
+      },
+      // 使用中心点和实体的长宽高进行定位
+      /*
+        center: {x: 0, y: 0, z: 0},
+        box: {x: 0, y: 0, z: 0}
+      */
+      locateByCenterBox(center, size) {
+        let maxDim = Math.max(size.x, size.y, size.z);
+        let fov = camera.fov * (Math.PI / 180);
+        let distance = Math.min(
+          maxDim * 100, // 最大距离限制
+          Math.abs((maxDim * 1.0) / Math.sin(fov / 2))
+        );
+        let direction = new this.THREE.Vector3(1, 1, 1).normalize();
+        let p = new this.THREE.Vector3().copy(center).add(direction.multiplyScalar(distance));
+        let cameraCenter = new this.THREE.Vector3(p.x, p.y, p.z).addScalar(
+          Math.max(size.x, size.y, size.z)
+        );
+        cameraControls.setLookAt(
+          cameraCenter.x,
+          cameraCenter.y,
+          cameraCenter.z,
+          center.x,
+          center.y,
+          center.z,
+          true
+        );
+      },
+      // 添加广告牌
+      /*
+        参数：
+        {
+          billboard: DOM节点
+          name: 2d广告牌的名字，用来做清除用的
+          x、y、z为广告牌的位置
+        }
+      */
+      billboard(data) {
+        const divLabel = new CSS2DObject(data.billboard);
+        divLabel.name = data.labelClass; // 这个是用来清除广告牌用的
+        divLabel.position.set(data.x, data.y, data.z);
+        scene.add(divLabel);
+        return divLabel;
+      },
+      // 通过名字获取实体对象, 返回数组
+      getObjectByName(name) {
+        let object = [];
+        scene.traverse(item => {
+          if (item.name === name) {
+            object.push(item);
+          }
+        });
+        return object;
+      },
+      // 通过id获取实体对象, 返回查找到的对象
+      getObjectById(id) {
+        return scene.getObjectById(id);
+      },
+      // 通过id删除对象
+      removeObjectById(id) {
+        let array = this.getObjectByName(id);
+        array.forEach(item => {
+          if (item.name === id) {
+            item.material && item.material.dispose();
+            item.geometry && item.geometry.dispose();
+            if (item.isMesh) {
+              item.clear();
+            }
+            scene.remove(item);
+          }
+        });
+      },
+      // 通过名称删除对象
+      removeObjectByName(name) {
+        let array = this.getObjectByName(name);
+        array.forEach(item => {
+          item.material && item.material.dispose();
+          item.geometry && item.geometry.dispose();
+          if (item.isMesh) {
+            item.clear();
+          }
+          scene.remove(item);
+        });
+      },
+      // 删除场景中所有的实体
+      removeAll() {
+        return new Promise(resolve => {
+          if (scene) {
+            this.removeTraverse();
+            resolve();
+          } else {
+            resolve();
+          }
+        });
+      },
+      removeTraverse() {
+        let length = modelGroup.children.length;
+        if (length > 0) {
+          let list = modelGroup.children[0];
+          list.traverse(item => {
+            if (item.isMesh) {
+              item.material.dispose();
+              item.geometry.dispose();
+              item.clear();
+              item.material = null;
+              item.geometry = null;
+              modelGroup.remove(item);
+              item = null;
+            }
+          });
+          modelGroup.remove(list);
+          this.removeTraverse();
+        } else {
+          // 在这里清除一些标记之类的
+          modelGroup.clear();
+          scene.remove(modelGroup);
+          renderer.clear();
+          modelGroup = null;
+          modelGroup = new this.THREE.Group();
+        }
+      },
+      // 销毁场景 释放内存
+      destroyScene() {
+        cancelAnimationFrame(animateId);
+        if (scene) {
+          this.removeTraverse();
+          scene.clear();
+          scene = null;
+        }
+        renderer.forceContextLoss();
+        renderer.dispose();
+        camera = null;
+        cameraControls = null;
+        renderer.domElement = null;
+        renderer = null;
+      },
+      // 绘制曲线
+      /*
+        参数声明：Object
+        {
+          path: [{x:0, y: 0, z: 0}], 坐标点信息
+          color: '', // 线条的颜色
+          name: '', // 线条的名字, 用来清除时使用的
+        }
+      */
+      drawCurve(params) {
+        this.removeObjectByName(params.name);
+        const route = [];
+        params.path.forEach(element => {
+          route.push(new this.THREE.Vector3(element.x, element.y, element.z));
+        });
+        if (route.length > 1) {
+          curve = new this.THREE.CatmullRomCurve3(route);
+          const geometryLine = new this.THREE.BufferGeometry().setFromPoints(curve.getPoints(5000));
+          const materialLine = new this.THREE.LineBasicMaterial({
+            color: params.color,
+            depthTest: false,
+            transparent: true,
+          });
+          let line = new this.THREE.Line(geometryLine, materialLine);
+          line.name = params.name;
+          scene.add(line);
+        }
+      },
+      // 绘制贴图曲线
+      /*
+        参数声明：Object
+        {
+          path: [{x:0, y: 0, z: 0}], 坐标点信息
+          name: '', // 线条的名字, 用来清除时使用的
+        }
+      */
+      drawTextureCurve(params) {
+        this.removeObjectByName(params.name);
+        const route = [];
+        params.path.forEach(element => {
+          route.push(new this.THREE.Vector3(element.x, element.y, element.z));
+        });
+        // 画曲线
+        if (route.length > 1) {
+          // 曲线 作为路径
+          curve = new this.THREE.CatmullRomCurve3(route, false, 'catmullrom', 0);
+          const geometry = new this.THREE.TubeGeometry(curve, 5000, 0.5, 4);
+          //加载纹理
+          lineTexture = new this.THREE.TextureLoader().load('/static/arrow/arrow-right.png');
+          lineTexture.wrapS = this.THREE.RepeatWrapping;
+          lineTexture.wrapT = this.THREE.RepeatWrapping;
+          lineTexture.repeat.set(20, 1); //水平重复20次
+          lineTexture.needsUpdate = true;
+          lineTexture.offset.y = 0.5;
+          const material = new this.THREE.MeshBasicMaterial({
+            map: lineTexture,
+            side: this.THREE.BackSide, //显示背面
+            transparent: true,
+          });
+          let line = new this.THREE.Line(geometry, material);
+          line.name = params.name;
+          scene.add(line);
+          clock = new this.THREE.Clock();
+        }
+      },
+      //
+      // 开启漫游
+      /*
+        参数为Object
+        loop: true / false是否进行循环模型 默认是false
+        speed: number 漫游的速度,
+        path: [{x: 0, y: 0, z: 0}] 漫游的坐标位置点,
+        name: '', 路径的名称，用来清除用的
+      */
+      startRoam(params) {
+        progress = 0;
+        roamConfig = {
+          loop: params.loop,
+          speed: params.speed,
+        };
+        this.drawTextureCurve({
+          name: params.name,
+          path: params.path,
+        });
+        roaming = true;
+      },
+      // 更新漫游的配置
+      /*
+        参数为Object 
+      */
+      updateRoamConfig(params) {
+        for (let key in params) {
+          roamConfig[key] = params[key];
+        }
+      },
+      // 结束/退出漫游
+      endRoam() {
+        roaming = false;
+        progress = 0;
+        this.removeObjectByName(roamConfig.name);
+        roamConfig = {
+          loop: false,
+          speed: 0,
+          name: '',
+        };
+        roaming = false;
+        lineTexture = null;
+      },
+      // 相机跟随轨道
+      cameraTrack() {
+        if (roaming) {
+          renderEnabled = true;
+          lineTexture.offset.x -= 0.05;
+          // 相机和控制器的偏移
+          let offset = 10 / curve.getLength();
+          // progress 取值范围为0~1。getPoint(0)表示曲线起点，getPoint(1)表示曲线终点
+          if (progress <= 1 - offset) {
+            // this.timeRender()
+            const point = curve.getPointAt(progress);
+            const pointBox = curve.getPointAt(progress + offset);
+            camera.position.set(point.x, point.y + 5, point.z);
+            camera.lookAt(pointBox.x, pointBox.y + 5, pointBox.z);
+            cameraControls.setPosition(point.x, point.y + 5, point.z, false);
+            cameraControls.setTarget(pointBox.x, pointBox.y + 5, pointBox.z, false);
+            progress += roamConfig.speed / 300;
+          } else {
+            // 循环漫游
+            if (roamConfig.loop) {
+              progress = 0;
+            }
+          }
+        } else {
+          lineTexture = null;
+          progress = 0;
+        }
+      },
+      // 全局整体炸开
+      /**
+       * 参数val: 爆炸的值
+       */
+      globalBomb(val) {
+        if (scene.children.length === 0) return;
+        for (let i = 0; i < scene.children.length; i++) {
+          scene.children[i].traverse(item => {
+            if (!item.isMesh || !item.worldDir) return;
+            // 爆炸公式
+            this.computedBomb(item, val);
+          });
+        }
+        // this.timeRender();
+      },
+      // 单个实体模型炸开
+      /*
+        参数:
+          name: '',当前选中的实体对象的id
+          value: 0 - 100 整数
+      */
+      localBomb(name, value) {
+        let target = scene.getObjectByName(name);
+        if (target) {
+          this.computedBomb(target, value);
+        }
+      },
+      computedBomb(object, val) {
+        let bombPosition = new this.THREE.Vector3()
+          .copy(object.userData.oldPs)
+          .add(new this.THREE.Vector3().copy(object.worldDir).multiplyScalar(val))
+          .add(new this.THREE.Vector3().copy(object.userData.position));
+        object.position.copy(bombPosition);
+      },
+      // 设置全局整体剖切
+      /*
+        先开启模型全局剖切模式, 会返回剖切值的最大最小值
+        剖切值变换时, 使用
+      */
+      setGlobalClipping(flag = true) {
+        const box3 = new this.THREE.Box3().setFromObject(scene.children[0]);
+        let max = box3.max;
+        let min = box3.min;
+        const clippingPlanes = [
+          new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), max.x),
+          new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), max.y),
+          new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), max.z),
+        ];
+        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
+          );
+        }
+        return {
+          min: min,
+          max: max,
+        };
+      },
+      // 更新全局剖切的值
+      /*
+        参数：Object
+        {x: 1, y: 0, z: 0} 可以传一个也可以传多个
+      */
+      updateGlobalCliValue(params) {
+        let axis = {
+          x: 0,
+          y: 1,
+          z: 2,
+        };
+        for (const key in params) {
+          renderer.clippingPlanes[axis[key]].constant = params[key];
+        }
+        // this.timeRender()
+      },
+      // 取消全局剖切
+      cancelGlobalClipping() {
+        guiParams = {
+          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);
+        renderer.localClippingEnabled = true;
+        // mesh的boundingBox 可以获取到该对象位置的最大最小值 但是在这里我们需要把y、z轴互换
+        const boundingBox = new this.THREE.Box3().copy(obj.boundingBox);
+        boundingBox.applyMatrix4(obj.matrixWorld);
+        let clippingPlanes = [
+          new this.THREE.Plane(new this.THREE.Vector3(-1, 0, 0), Math.ceil(boundingBox.max.x)),
+          new this.THREE.Plane(new this.THREE.Vector3(0, -1, 0), Math.ceil(boundingBox.max.y)),
+          new this.THREE.Plane(new this.THREE.Vector3(0, 0, -1), Math.ceil(boundingBox.max.z)),
+        ];
+        obj.material.clippingPlanes = clippingPlanes;
+        obj.material.needsUpdate = true;
+        // 将局部剖切的对象记录下来
+        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
+          );
+          // cube.material.clippingPlanes
+        }
+        return {
+          min: boundingBox.min,
+          max: boundingBox.max,
+        };
+      },
+      // 更新局部剖切的值
+      /*
+        参数：Object
+        {x: 1, y: 0, z: 0} 可以传一个也可以传多个
+      */
+      updateLocalCliValue(params) {
+        let axis = {
+          x: 0,
+          y: 1,
+          z: 2,
+        };
+        let obj = clippingMesh[clippingMesh.length - 1];
+        for (const key in params) {
+          obj.material.clippingPlanes[axis[key]].constant = params[key];
+          obj.material.needsUpdate = true;
+        }
+        // this.timeRender()
+      },
+      // 取消局部/单个实体的剖切
+      cancelLocalClipping() {
+        guiParams = {
+          x轴: 0,
+          y轴: 0,
+          z轴: 0,
+        };
+        gui && gui.destroy();
+        clippingMesh.forEach(item => {
+          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(guiParams['x轴'])
+          .onChange(d => {
+            objClipp1[0].constant = d;
+            objClipp2 && (objClipp2[0].constant = d);
+          });
+        gui
+          .add(guiParams, 'y轴')
+          .min(minValue.y)
+          .max(guiParams['y轴'])
+          .onChange(d => {
+            objClipp1[2].constant = d;
+            objClipp2 && (objClipp2[2].constant = d);
+          });
+        gui
+          .add(guiParams, 'z轴')
+          .min(minValue.z)
+          .max(guiParams['z轴'])
+          .onChange(d => {
+            objClipp1[1].constant = d;
+          });
+      },
+      // 开启第一视角
+      startFirstPer({ moveSpeed = 200, jumpSpeed = 200 }) {
+        removeSpeed = moveSpeed;
+        upSpeed = jumpSpeed;
+
+        clock = new this.THREE.Clock();
+        downRaycaster = new this.THREE.Raycaster(
+          new this.THREE.Vector3(),
+          new this.THREE.Vector3(0, -1, 0),
+          0,
+          10
+        );
+        velocity = new this.THREE.Vector3(); //移动速度变量
+        direction = new this.THREE.Vector3(); //移动的方向变量
+        firstPerSign = true;
+        this.initPointerLock();
+      },
+      // 页面是否锁定
+      initPointerLock() {
+        this.home();
+        setTimeout(() => {
+          pointControls = new PointerLockControls(camera, renderer.domElement);
+          pointControls.lock();
+          // 锁定
+          pointControls.addEventListener('lock', () => {
+            cameraControls.enabled = false;
+            window.addEventListener('keydown', this.onKeyDown, false);
+            window.addEventListener('keyup', this.onKeyUp, false);
+            renderer.domElement.removeEventListener('mouseup', this.mouseClick, false);
+            renderer.domElement.removeEventListener('mousedown', this.mouseDown, false);
+          });
+          // 解锁
+          pointControls.addEventListener('unlock', () => {
+            firstPerSign = false;
+            cameraControls.enabled = true;
+            // 返回初始视角
+            cameraControls.reset(true);
+            cameraControls.update(0);
+            setTimeout(() => {
+              window.removeEventListener('keydown', this.onKeyDown);
+              window.removeEventListener('keyup', this.onKeyUp);
+              renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+              renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+              // this.timeRender()
+            }, 0);
+          });
+          scene.add(pointControls.object);
+        }, 10);
+      },
+      // 第一视角运动
+      firstPerspective() {
+        if (!cameraControls.enabled && firstPerSign) {
+          // 获取到控制器对象
+          let control = pointControls.object;
+          // 获取刷新时间
+          let delta = clock.getDelta();
+          // velocity每次的速度，为了保证有过渡
+          velocity.x -= velocity.x * 10.0 * delta;
+          velocity.z -= velocity.z * 10.0 * delta;
+          velocity.y -= 9.8 * 100.0 * delta; // 默认下降的速度
+          // 获取当前按键的方向并获取朝哪个方向移动
+          direction.z = Number(moveForward) - Number(moveBackward);
+          direction.x = Number(moveRight) - Number(moveLeft);
+          // 将法向量的值归一化
+          direction.normalize();
+          if (moveForward || moveBackward) velocity.z -= direction.z * removeSpeed * delta;
+          if (moveLeft || moveRight) velocity.x -= direction.x * removeSpeed * delta;
+          // }
+          // 复制相机的位置
+          downRaycaster.ray.origin.copy(control.position);
+          // 获取相机靠下5的位置
+          downRaycaster.ray.origin.y += 5;
+          // 判断是否停留在了立方体上面
+          let intersections = downRaycaster.intersectObjects(scene.children, true);
+          var onObject = intersections.length > 0;
+          if (onObject === true) {
+            velocity.y = Math.max(0, velocity.y);
+            canJump = true;
+          }
+          // 根据速度值移动控制器
+          pointControls.moveRight(-velocity.x * delta);
+          pointControls.moveForward(-velocity.z * delta);
+          control.position.y += velocity.y * delta;
+          // 保证控制器的y轴在平面上
+          if (control.position.y < 3 - 0 / 10) {
+            velocity.y = -0 / 10;
+            control.position.y = 3 - 0 / 10;
+            canJump = true;
+          }
+        }
+      },
+      // 键盘监听事件
+      onKeyDown(event) {
+        if (!event.keyCode) return;
+        switch (event.keyCode) {
+          // 前进
+          case 38:
+          case 87:
+            moveForward = true;
+            break;
+          // 向左
+          case 37:
+          case 65:
+            moveLeft = true;
+            break;
+          // 后退
+          case 40:
+          case 83:
+            moveBackward = true;
+            break;
+          // 向右
+          case 39:
+          case 68:
+            moveRight = true;
+            break;
+          // 跳跃
+          case 32:
+            if (canJump && spaceUp) velocity.y += upSpeed;
+            canJump = false;
+            spaceUp = false;
+            break;
+        }
+      },
+      onKeyUp(event) {
+        if (!event.keyCode) return;
+        // this.timeRender()
+        switch (event.keyCode) {
+          // 前进
+          case 38:
+          case 87:
+            moveForward = false;
+            break;
+          // 向左
+          case 37:
+          case 65:
+            moveLeft = false;
+            break;
+          // 后退
+          case 40:
+          case 83:
+            moveBackward = false;
+            break;
+          // 向右
+          case 39:
+          case 68:
+            moveRight = false;
+            break;
+          // 跳跃
+          case 32:
+            spaceUp = true;
+            break;
+        }
+      },
+      // 返回主视角/恢复相机初始状态
+      home() {
+        if (roaming) {
+          this.endRoam();
+        }
+        cameraControls.reset(true);
+        cameraControls.update(0);
+        // this.timeRender()
+      },
+      // 测量
+      /*
+       参数: type: '', distance、area、angle, 暂时只提供距离、面积、角度这三种方式
+      */
+      openMeasure(type) {
+        if (threeMeasure) {
+          threeMeasure.close();
+          threeMeasure = null;
+        }
+        measureFlag = true;
+        renderEnabled = true;
+        switch (type) {
+          case 'distance':
+            threeMeasure = new MeasureDistance.MeasureDistance(
+              renderer,
+              scene,
+              camera,
+              instructions.offsetWidth,
+              instructions.offsetHeight
+            );
+            threeMeasure.start();
+            break;
+          case 'area':
+            threeMeasure = new MeasureArea.MeasureArea(
+              renderer,
+              scene,
+              camera,
+              instructions.offsetWidth,
+              instructions.offsetHeight
+            );
+            threeMeasure.start();
+            break;
+          case 'angle':
+            threeMeasure = new MeasureAngle.MeasureAngle(
+              renderer,
+              scene,
+              camera,
+              instructions.offsetWidth,
+              instructions.offsetHeight
+            );
+            threeMeasure.start();
+            break;
+        }
+        // 添加键盘事件监听器
+        document.addEventListener('keydown', this.handleMeasureKeyDown, false);
+      },
+      // 关闭测量
+      closeMeasure() {
+        measureFlag = false;
+        if (threeMeasure) {
+          threeMeasure.close();
+          threeMeasure = null;
+          // this.timeRender()
+        }
+        // 移除键盘事件监听器
+        document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
+      },
+      handleMeasureKeyDown(event) {
+        // 检查是否按下了ESC键
+        const keyParam = {
+          desc: event.key,
+          keyCode: event.keyCode,
+          event,
+        };
+        if (event.keyCode === 27) {
+          // ESC键的键码是27
+          this.closeMeasure();
+        }
+        this.$emit('keyDown', keyParam);
+      },
+      // 开启平移
+      /*
+        参数: object, 当前选中的对象, distance: {x: 0, y: 0, z: 0}, 平移的距离
+      */
+      translateMesh(object, distance) {
+        let translateMatrix = new this.THREE.Matrix4().makeTranslation(
+          distance.x,
+          distance.y,
+          distance.z
+        );
+        let translateMatrixInvert = new this.THREE.Matrix4().copy(translateMatrix).invert();
+        if (object.userData.translateMatrixInvert) {
+          object.applyMatrix4(object.userData.translateMatrixInvert);
+        }
+        object.userData.translateMatrixInvert = translateMatrixInvert;
+        object.applyMatrix4(translateMatrix);
+        object.userData.position = new this.THREE.Vector3().copy(object.position);
+        object.userData.translate = distance;
+      },
+      // 单个模型对象旋转
+      /*
+        参数: object, 目标实体, degrees: {x: 0, y: 0, z: 0}, 旋转的数值（0-360）
+      */
+      rotateMesh(object, degrees) {
+        // 在矩阵的计算里 完成撤销操作是向量去乘以一个矩阵的逆矩阵
+        // 变化后的向量 = 原始向量 * 变化矩阵
+        // 逆矩阵 = 变化矩阵.inverse()
+        // 原始向量 = 变化后的向量 * 逆矩阵
+        let center = object.userData.center;
+        let v = new this.THREE.Vector3(center.x, center.y, center.z).negate();
+        let translateMatrix = new this.THREE.Matrix4().makeTranslation(v.x, v.y, v.z);
+        let rotateX = new this.THREE.Matrix4().makeRotationX(degrees.x * (Math.PI / 180));
+        let rotateY = new this.THREE.Matrix4().makeRotationY(degrees.y * (Math.PI / 180));
+        let rotateZ = new this.THREE.Matrix4().makeRotationZ(degrees.z * (Math.PI / 180));
+        let combineMatrix = new this.THREE.Matrix4()
+          .multiply(rotateX)
+          .multiply(rotateY)
+          .multiply(rotateZ);
+        object.applyMatrix4(translateMatrix);
+        let combineMatrixInvert = new this.THREE.Matrix4().copy(combineMatrix).invert();
+        if (object.userData.combineMatrixInvert) {
+          object.applyMatrix4(object.userData.combineMatrixInvert);
+        }
+        object.userData.combineMatrixInvert = combineMatrixInvert;
+        object.applyMatrix4(combineMatrix);
+        let translateM = new this.THREE.Matrix4().makeTranslation(center.x, center.y, center.z);
+        object.applyMatrix4(translateM);
+        object.userData.position = new this.THREE.Vector3().copy(object.position);
+        object.userData.rotate = degrees;
+      },
+      // 隔离
+      /*
+        参数: object, 目标实体,
+      */
+      isolate(object) {
+        // 隔离 将目标实体以外的实体隐藏掉
+        scene.traverse(item => {
+          if (item.isMesh && item.name !== object.name) {
+            const offsetMatrix = new this.THREE.Matrix4()
+              .copy(item.userData.copyMatrix)
+              .makeTranslation(9999999, 9999999, 9999999);
+            item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
+            item.instanceMatrix.needsUpdate = true;
+          }
+        });
+      },
+      // 还原操作 将修改过的实体进行恢复
+      restore() {
+        scene.traverse(item => {
+          if (item.isMesh) {
+            item.setColorAt(item.userData.instanceIndex, item.material.userData.nColor);
+            item.instanceColor.needsUpdate = true;
+            item.userData.translate = {
+              x: 0,
+              y: 0,
+              z: 0,
+            };
+            item.userData.rotate = {
+              x: 0,
+              y: 0,
+              z: 0,
+            };
+            if (item.userData.translateMatrixInvert) {
+              item.applyMatrix4(item.userData.translateMatrixInvert);
+              item.userData.translateMatrixInvert = null;
+            }
+            if (item.userData.combineMatrixInvert) {
+              this.rotateMesh(item, {
+                x: 0,
+                y: 0,
+                z: 0,
+              });
+              item.userData.combineMatrixInvert = null;
+            }
+            const offsetMatrix = new this.THREE.Matrix4().copy(item.userData.copyMatrix);
+            item.setMatrixAt(item.userData.instanceIndex, offsetMatrix);
+            item.instanceMatrix.needsUpdate = true;
+          }
+        });
+      },
+      //  添加自定义模型, 暂时只支持glb、gltf格式
+      addCustomModel(name, position, url, scale = 1, immediately = false, callback) {
+        const loader = new GLTFLoader();
+        let locationModel = null;
+        loader.load(url, gltf => {
+          locationModel = gltf.scene;
+          locationModel.scale.set(scale, scale, scale);
+          locationModel.updateMatrixWorld();
+          if (immediately) {
+            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));
+          if (gltf.animations.length > 0) {
+            let actionMixer = new this.THREE.AnimationMixer(gltf.scene);
+            const walkActive = actionMixer.clipAction(gltf.animations[0]);
+            walkActive.play();
+            modelActive.push(walkActive);
+            modelActions.push(actionMixer);
+          }
+          callback && callback();
+        });
+      },
+      // 删除添加的自定义模型
+      removeCustomModel(name) {
+        let obj = this.getObjectByName(name);
+        obj.forEach((item, index) => {
+          if (item.animations > 0) {
+            item.removeFromParent();
+            modelActions[index].uncacheRoot(item);
+            modelActions[index].uncacheRoot(modelActive[index]);
+          }
+          item.traverse(child => {
+            if (child instanceof this.THREE.Mesh) {
+              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;
+      },
+      // 清除天空背景
+      clearSkyBoxScene() {
+        scene.background = null;
+      },
+      // 下雨模拟
+      sceneSimu(type) {
+        if (!outlineComposer) {
+          outlineComposer = new EffectComposer(renderer, renderTarget);
+          outlineComposer.addPass(new RenderPass(scene, camera));
+        }
+        if (type === 'rain') {
+          scenePass = new ShaderPass(RainShader);
+          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
+          );
+          outlineComposer.addPass(scenePass);
+        }
+      },
+      clearSceneSim() {
+        if (scenePass && outlineComposer) {
+          outlineComposer.removePass(scenePass);
+        }
+        scenePass = null;
+      },
+      // 获取中心点
+      getCenter(obj) {
+        let center = new this.THREE.Vector3();
+        obj.boundingBox.getCenter(center);
+        if (obj.userData.is3D) {
+          center.applyMatrix4(mat4);
+        }
+        return center;
+      },
+      getSize(obj) {
+        let size = new this.THREE.Vector3();
+        obj.boundingBox.getSize(size);
+        if (obj.userData.is3D) {
+          size.applyMatrix4(mat4);
+        }
+        return size;
+      },
+      // 动画
+      renderBegin() {
+        // 渲染第一帧
+        console.log('渲染第一帧');
+        renderer.setRenderTarget(postTarget);
+        renderer.clearRenderState(scene, camera);
+        renderer.clear(true, true, true);
+        renderer.render(scene, camera, false);
+        renderer.setRenderTarget(null);
+        renderer.clear(true, true, true);
+        renderer.render(postScene, postCamera);
+      },
+
+      renderResidual() {
+        // 剩余部分
+        console.log('剩余部分');
+        renderer.setRenderTarget(postTarget);
+        renderer.render(scene, camera);
+        renderer.setRenderTarget(null);
+        renderer.clear(true, true, true);
+        renderer.render(postScene, postCamera);
+      },
+      animate() {
+        const delta = fpsClock.getDelta();
+        timeStamp += delta;
+        animateId = requestAnimationFrame(this.animate);
+        if (timeStamp > singleFrameTime) {
+          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();
+            scenePass.uniforms['iTime'].value += d;
+          }
+          labelRenderer.render(scene, camera);
+          if (renderEnabled) {
+            this.renderBegin();
+          } else {
+            if (!scene.renderStage.isComplete()) {
+              this.renderResidual();
+            } else {
+              renderEnabled = false;
+              if (sceneChangeFlag) {
+                renderer.setRenderTarget(postTarget);
+                renderer.renderIncrement(scene, camera);
+                renderer.setRenderTarget(null);
+                renderer.clear(true, true, true);
+                renderer.render(postScene, postCamera);
+                sceneChangeFlag = false;
+              }
+            }
+          }
+          // renderer.setRenderTarget(null)
+          timeStamp = timeStamp % singleFrameTime;
+          outlineComposer && outlineComposer.render();
+        }
+      },
+      // 暴露个别参数让业务自己做特殊业务。
+      // 后续若多个业务有相同使用场景，再抽象至公共组件中。
+      exportParmas() {
+        return {
+          renderer,
+          camera,
+          cameraControls,
+          scene,
+        };
+      },
+      setMouseAction(btn) {
+        const ACTION_ENUM = {
+          none: 0,
+          rotate: 1,
+          drag: 2,
+        };
+        const { left, right } = btn;
+
+        left && (cameraControls.mouseButtons.left = ACTION_ENUM[left]);
+        right && (cameraControls.mouseButtons.right = ACTION_ENUM[right]);
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  #fl-model {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+  ::v-deep .tips-label {
+    width: 60px;
+    color: #000;
+    font: 12px Helvetica;
+    margin-top: -3em;
+    padding: 5px;
+    text-align: center;
+    vertical-align: middle;
+    background-color: khaki;
+  }
+
+  ::v-deep .measure-label {
+    max-width: 100px;
+    margin-top: -1em;
+    border: 10px;
+    border-radius: 5px;
+    padding: 3px 10px;
+    cursor: pointer;
+    color: rgb(0, 155, 234);
+    background-color: rgb(244, 244, 244);
+    box-shadow: 0px 1px 3px 1px rgba(0, 0, 0, 0.25);
+  }
+  ::v-deep .circle-tag {
+    width: 10px;
+    height: 10px;
+    margin-top: 5px;
+    border-radius: 50%;
+    background-color: #ff5000;
+  }
+  ::v-deep .measure-label-font {
+    word-break: break-all;
+  }
+
+  ::v-deep .mark-label-img {
+    padding-top: 5px;
+    width: 20px;
+    height: 20px;
+  }
+</style>