fl-web-component 2.0.0-beta.3 → 2.0.0-beta.5

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

@@ -1,1679 +0,0 @@
-<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>