在vue2中使用three.js进行模型拆分和复原和拖拽

操作

拆分和复原原理很简单就是要记住1原来位置和要拆分的位置，我这边只是简单的进行了拆分没有实际去对某一个建模拆分到具体位置

1.拖拽关键代码

//建模拖拽
        let dragObj = []
        dragObj.push(loadObjmore)
        dControls = new DragControls(dragObj, camera, renderer.domElement)
        dControls.addEventListener('dragstart', function() {
          controls.enabled = false
        })
        dControls.addEventListener('drag', function(event) {
          // 在这里添加限制拖动位置的逻辑
          // 例如，可以检查模型的位置并根据需要调整它
          if (event.object.position.y <= 0) {
            event.object.position.y = 0;
          }
        });
        dControls.addEventListener('dragend', function(e) {
          console.log(e)
          controls.enabled = true
        })
        setTimeout(() => {
          that.$nextTick(() => {
            that.initEqpStatus()
          })
        }, 2000)

2.拆分代码如下

// decompose 分解的大小距离
      setModelMeshDecompose(decompose) {
        // 如果当前模型只有一个材质则不进行拆解
        if (this.glowMaterialList.length <= 1) return false
        // 修改材质位置移动
        const modelDecomposeMove = (obj, position) => {
          new TWEEN.Tween(obj.position)
            .to(position, 500)
            .onUpdate(function(val) {
              obj.position.set(val.x || 0, val.y || 0, val.z || 0);
            })
            .start();
        }
        const length = this.glowMaterialList.length
        const angleStep = (2 * Math.PI) / length;
        // TODD glowMaterialList：当前模型的所有材质列表名称
        this.glowMaterialList.forEach((name, i) => {
          // 通过 getObjectByName 获取 要修改的材质

          const mesh = scene.getObjectByName(name)
          // 如果 type 类型为Mesh 则修改材质的位置
          if (mesh.type == 'Mesh') {
            // 拆解位置移动的计算公式
            const angle = i * angleStep;
            const x = (decompose) * Math.cos(angle);
            const y = (decompose) * Math.sin(angle);
            const position = {
              x,
              y,
              z: 0
            }
            // 执行拆解
            modelDecomposeMove(mesh, position)
          }
        })
      },