fl-web-component 0.1.0 → 1.0.0

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

@@ -0,0 +1,1073 @@
+<template>
+  <div id="instructions"></div>
+</template>
+<script>
+  var [
+    renderer,
+    scene,
+    camera,
+    cameraControls,
+    instructions,
+    raycaster,
+    mouse,
+    labelRenderer,
+    lineTexture,
+    curve,
+    downRaycaster,
+    velocity,
+    direction,
+    clock,
+    pointControls,
+    threeMeasure,
+    modelGroup,
+  ] = (function* (v) {
+    while (true) yield v;
+  })(null);
+
+  var [lastTime, firstTime, fpsClock, timeStamp, progress] = (function* (v) {
+    while (true) yield v;
+  })(0);
+
+  var [
+    roaming,
+    firstPerSign,
+    canJump,
+    moveForward,
+    moveBackward,
+    moveLeft,
+    moveRight,
+    measureFlag,
+  ] = (function* (v) {
+    while (true) yield v;
+  })(false);
+
+  var [spaceUp] = (function* (v) {
+    while (true) yield v;
+  })(true);
+
+  var clippingPlanes = [];
+  var removeSpeed = 200,
+    upSpeed = 200; //控制器移动速度 , //控制跳起时的速度
+  var modelGroup;
+
+  //  绘制对象映射实例表
+  let drawObjMapInstance = {};
+
+  import CameraControls from 'camera-controls';
+  import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+  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 MeasureDistance from '@/utils/threejs/measure-distance.js';
+  import MeasureArea from '@/utils/threejs/measure-area.js';
+  import MeasureAngle from '@/utils/threejs/measure-angle.js';
+  // import glb from '@assets/worker.glb';
+  import { parseData } from '@/utils/flgltf-parser';
+  import { handleInstancedMeshModel } from '@/utils/instance-parser';
+
+  export default {
+    name: 'FlModel',
+    props: {
+      data: {
+        type: Object,
+        default() {
+          return {};
+        },
+      },
+    },
+    data() {
+      return {
+        roamConfig: {
+          loop: false,
+          speed: 0, // 最大值为3
+        },
+      };
+    },
+    created() {
+      CameraControls.install({ THREE: this.THREE });
+      fpsClock = new this.THREE.Clock();
+      raycaster = new this.THREE.Raycaster();
+      mouse = new this.THREE.Vector2();
+    },
+    mounted() {
+      instructions = document.getElementById('instructions');
+      this.initRender();
+      this.initScene();
+      this.initCamera();
+      this.initControl();
+      this.initLight();
+      this.initLabelRender();
+      renderer.domElement.addEventListener('mouseup', this.mouseClick, false);
+      renderer.domElement.addEventListener('mousedown', this.mouseDown, false);
+      this.animate();
+    },
+    methods: {
+      initRender() {
+        renderer = new this.THREE.WebGLRenderer({
+          antialias: true,
+          alpha: true,
+          logarithmicDepthBuffer: true,
+        });
+        renderer.setPixelRatio(window.devicePixelRatio * 2);
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.domElement.id = 'three-model';
+        renderer.shadowMap.enabled = true;
+        // 暂时注释这句 还有worker里面的 这跟渲染出的模型浅或暗有关系
+        renderer.outputEncoding = this.THREE.sRGBEncoding;
+        instructions.appendChild(renderer.domElement);
+        renderer.autoClear = false;
+        renderer.autoClearColor = false;
+        renderer.autoClearDepth = false;
+        renderer.autoClearStencil = false;
+      },
+      initScene() {
+        modelGroup = new this.THREE.Group();
+        scene = new this.THREE.Scene();
+        // scene.userData.recordEntity = []
+
+        // 适配客户端的坐标系，threejs坐标需绕x轴旋转90度
+        const mat4 = new this.THREE.Matrix4();
+        mat4.makeRotationX(-Math.PI / 2);
+        scene.applyMatrix4(mat4);
+      },
+      initCamera() {
+        camera = new this.THREE.PerspectiveCamera(
+          45,
+          window.innerWidth / window.innerHeight,
+          0.1,
+          10000
+        );
+        camera.position.set(0, 100, 150);
+      },
+      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();
+        labelRenderer.setSize(instructions.offsetWidth, instructions.offsetHeight);
+        labelRenderer.domElement.style.position = 'absolute';
+        labelRenderer.domElement.style.top = '0px';
+        labelRenderer.domElement.style.pointerEvents = 'none';
+        instructions.appendChild(labelRenderer.domElement);
+      },
+      // 根据模型数据绘制模型实体 业务平台可调用此方法加载模型
+      /*
+        参数：data 模型数据
+          color: '' 初始化模型的颜色 在业务方 有这个需求
+      */
+      drawModel(data, color = '') {
+        if (Object.keys(data).length === 0) {
+          return;
+        }
+        const { instances, drawObjs } = parseData(data);
+        if (instances.length > 0) {
+          modelGroup = handleInstancedMeshModel(instances, drawObjs, '', scene, color);
+          scene.add(modelGroup);
+          // this.compileShader();
+          cameraControls.fitToSphere(modelGroup, true);
+          cameraControls.saveState();
+        }
+      },
+      compileShader() {
+        scene.traverse(child => {
+          if (child.isMesh) {
+            child.material.onBeforeCompile = shader => {
+              const vertexShader = `
+                precision lowp float;
+                attribute float visible;
+                varying float vVisible;
+                void main() {
+                  vVisible = visible;
+              `;
+              const fragmentShader = `
+                precision lowp float;
+                varying float vVisible;
+                void main() {
+              `;
+              const fragColor = `
+                #include <dithering_fragment>
+                if (vVisible > 0.0) {
+                  gl_FragColor = vec4(outgoingLight, diffuseColor.a);
+                } else {
+                  discard;
+                }
+              `;
+              shader.vertexShader = shader.vertexShader.replace('void main() {', vertexShader);
+              shader.fragmentShader = shader.fragmentShader.replace(
+                'void main() {',
+                fragmentShader
+              );
+              shader.fragmentShader = shader.fragmentShader.replace(
+                '#include <dithering_fragment>',
+                fragColor
+              );
+              child.material.transparent = true;
+            };
+          }
+        });
+      },
+      mouseDown() {
+        firstTime = new Date().getTime();
+      },
+      mouseClick(event) {
+        // 在测量模式下，不进行事件暴露
+        if (!measureFlag) {
+          lastTime = new Date().getTime();
+          if (lastTime - firstTime < 300) {
+            mouse.x = (event.clientX / instructions.offsetWidth) * 2 - 1;
+            mouse.y = -(event.clientY / instructions.offsetHeight) * 2 + 1;
+            raycaster.setFromCamera(mouse, camera);
+            const intersects = raycaster.intersectObjects(scene.children, true);
+            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() {
+        // const box3 = new this.THREE.Box3();
+        // box3.setFromObject(modelGroup);
+        // 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();
+        // 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;
+                  children.geometry.attributes.visible.array[index] = ele.attr[key] ? 1.0 : 0.0;
+                  children.geometry.attributes.visible.needsUpdate = true;
+                });
+                break;
+              case 'opacity':
+                obj.material.opacity = ele.attr[key];
+                obj.material.transparent = true;
+                break;
+            }
+          }
+          // obj.material.needsUpdate = true;
+        }
+      },
+      // 修改整体模型实体的属性
+      /*
+        {
+          attr: '', 需要修改属性名（color、visible(true / false)、opacity(0-1),
+          value: , 需要修改成的值
+        }
+      */
+      updateWholeProperty(params) {
+        if (scene) {
+          scene.traverse(obj => {
+            if (obj instanceof this.THREE.Mesh) {
+              switch (params.attr) {
+                case 'color':
+                  obj.material.color = new this.THREE.Color(params.value);
+                  break;
+                case 'visible':
+                  obj.material.visible = params.value;
+                  break;
+                case 'opacity':
+                  obj.material.opacity = params.value;
+                  obj.material.transparent = true;
+                  break;
+              }
+              obj.material.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;
+              }
+            }
+          }
+        }
+      },
+      // 定位到模型
+      locateModel(id) {
+        let obj = scene.getObjectByName(id);
+        if (obj) {
+          cameraControls.fitToSphere(obj.parent, 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);
+      },
+      // 添加广告牌
+      /*
+        参数：
+        {
+          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 => {
+          if (item.name === name) {
+            item.material && item.material.dispose();
+            item.geometry && item.geometry.dispose();
+            if (item.isMesh) {
+              item.clear();
+            }
+            scene.remove(item);
+          }
+        });
+      },
+      // 绘制曲线
+      /*
+        参数声明：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);
+        }
+      },
+      // 绘制贴图曲线
+      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);
+        }
+      },
+      // 开启漫游
+      /*
+        参数为Object
+        loop: true / false是否进行循环模型 默认是false
+        speed: number 漫游的速度,
+        path: [{x: 0, y: 0, z: 0}] 漫游的坐标位置点,
+        name: '', 路径的名称，用来清除用的
+      */
+      startRoam(params) {
+        progress = 0;
+        this.roamConfig = Object.assign(
+          {},
+          {
+            loop: params.loop,
+            speed: params.speed,
+            roamName: params.name,
+          }
+        );
+        this.drawTextureCurve({
+          name: params.name,
+          path: params.path,
+        });
+        clock = new this.THREE.Clock();
+      },
+      // 暂停漫游
+      pauseRoaming() {
+        this.$set(this.roamConfig, 'speed', 0);
+      },
+      // 结束/退出漫游
+      endRoam() {
+        roaming = false;
+        progress = 0;
+        this.removeObjectByName(this.roamConfig.roamName);
+        this.roamConfig = Object.assign(
+          {},
+          {
+            loop: false,
+            speed: 0,
+            roamName: '',
+          }
+        );
+      },
+      // 相机跟随轨道
+      cameraTrack() {
+        if (roaming) {
+          // renderEnabled = true
+          lineTexture.offset.x -= 0.05;
+          // 相机和控制器的偏移
+          let offset = 10 / curve.getLength();
+          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 += this.roamConfig.speed / 300;
+          } else {
+            // 循环漫游
+            if (this.roamConfig.loop) {
+              progress = 0;
+            }
+          }
+        } else {
+          lineTexture = null;
+          this.roamConfig.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();
+      },
+      // 单个实体模型炸开
+      /*
+        参数:
+          id: '',当前选中的实体对象的id
+          value: 0 - 100 整数
+      */
+      localBomb(id, value) {
+        let target = scene.getObjectById(id);
+        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() {
+        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;
+        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() {
+        renderer.clippingPlanes = Object.freeze([]);
+      },
+      // 单个实体的剖切/ 局部剖切 obj 实体对象
+      setLocalClipping(obj) {
+        renderer.localClippingEnabled = true;
+        // mesh的boundingBox 可以获取到该对象位置的最大最小值 但是在这里我们需要把y、z轴互换
+        const boundingBox = new this.THREE.Box3().copy(obj.geometry.boundingBox);
+        boundingBox.applyMatrix4(obj.matrixWorld);
+        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;
+        // 将局部剖切的对象记录下来
+      },
+      // 更新局部剖切的值
+      /*
+        参数：Object
+        {x: 1, y: 0, z: 0} 可以传一个也可以传多个
+      */
+      updateLocalCliValue(params) {
+        let axis = {
+          x: 0,
+          y: 1,
+          z: 2,
+        };
+        for (const key in params) {
+          clippingPlanes[axis[key]].constant = params[key];
+        }
+        // this.timeRender()
+      },
+      // 取消局部/单个实体的剖切
+      cancelLocalClipping() {
+        clippingPlanes = Object.freeze([]);
+      },
+      // 开启第一视角
+      startFirstPer() {
+        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;
+          }
+          // this.timeRender()
+        }
+      },
+      // 键盘监听事件
+      onKeyDown(event) {
+        if (!event.keyCode) return;
+        // this.timeRender()
+        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.disposeRoaming()
+        // }
+        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;
+        }
+      },
+      // 关闭测量
+      closeMeasure() {
+        measureFlag = false;
+        if (threeMeasure) {
+          threeMeasure.close();
+          threeMeasure = null;
+          // this.timeRender()
+        }
+      },
+      // 开启平移
+      /*
+        参数: 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, 目标实体, params: {attr: 'visible/opacity', value: '(true/false)/(0-1)' 需要修改成的值},
+      */
+      isolate(object, params) {
+        // 隔离 将目标实体以外的实体半透明掉或者隐藏掉
+        scene.traverse(item => {
+          if (item.isMesh && item.name !== object.name) {
+            switch (params.attr) {
+              case 'visible':
+                object.material.visible = params.value;
+                break;
+              case 'opacity':
+                object.material.opacity = params.value;
+                object.material.transparent = true;
+                break;
+            }
+            item.material.needsUpdate = true;
+          }
+        });
+      },
+      // 还原操作 将修改过的实体进行恢复
+      restore() {
+        scene.traverse(item => {
+          if (item.isMesh) {
+            item.material.opacity = 1.0;
+            item.material.visible = true;
+            item.material.transparent = true;
+            item.material.color = item.material.userData.nColor;
+            item.material.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;
+            }
+          }
+        });
+      },
+      animate() {
+        const delta = fpsClock.getDelta();
+        timeStamp += delta;
+        requestAnimationFrame(this.animate);
+        cameraControls.enabled && cameraControls.update(timeStamp);
+        this.cameraTrack();
+        this.firstPerspective();
+        labelRenderer.render(scene, camera);
+        renderer.render(scene, camera);
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  #instructions {
+    width: 100%;
+    height: 100%;
+    cursor: pointer;
+  }
+</style>