vue threejs 模型拖动

Vue和Three.js结合可以实现模型的拖动效果。下面是一个示例的实现步骤：

1. 在Vue组件中引入Three.js库和需要展示的模型文件。
2. 创建一个`mounted()`方法，在该方法中创建一个Three.js的场景、相机和渲染器。
3. 加载模型文件，并将其加入场景中。
4. 添加鼠标监听事件，监听鼠标按下、移动和松开事件。
5. 在鼠标按下事件中，记录鼠标按下的初始位置。
6. 在鼠标移动事件中，获取鼠标移动的位置，并将其转换为三维坐标系中的位置。
7. 根据鼠标移动的位置更新模型位置，并将模型位置同步更新到场景中。
8. 在鼠标松开事件中，取消鼠标移动事件的监听。
9. 在组件销毁时，清除鼠标事件监听，释放资源。

这样就可以实现模型的拖动效果了。具体实现的代码可以参考以下示例：

<template>
  <div ref="canvas"></div>
</template>

<script>
import * as THREE from 'three';

export default {
  mounted() {
    this.init();
  },
  methods: {
    init() {
      // 创建场景、相机和渲染器
      const scene = new THREE.Scene();
      const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
      );

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      this.$refs.canvas.appendChild(renderer.domElement);

      // 加载模型文件
      const loader = new THREE.OBJLoader();
      loader.load('/path/to/model.obj', (obj) => {
        scene.add(obj);
      });

      // 鼠标事件监听
      let isDragging = false;
      let previousPosition = { x: 0, y: 0 };

      window.addEventListener('mousedown', (event) => {
        isDragging = true;
        previousPosition = {
          x: event.clientX,
          y: event.clientY
        };
      });

      window.addEventListener('mousemove', (event) => {
        if (!isDragging) return;

        const deltaMove = {
          x: event.clientX - previousPosition.x,
          y: event.clientY - previousPosition.y
        };

        const deltaRotationQuaternion = new THREE.Quaternion()
          .setFromEuler(new THREE.Euler(
            this.toRadians(deltaMove.y * 1),
            this.toRadians(deltaMove.x * 1),
            0,
            'XYZ'
          ));

        obj.quaternion.multiplyQuaternions(deltaRotationQuaternion, obj.quaternion);
        previousPosition = {
          x: event.clientX,
          y: event.clientY
        };
      });

      window.addEventListener('mouseup', () => {
        isDragging = false;
      });

      // 渲染场景
      function animate() {
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
      }

      animate();
    },
    toRadians(angle) {
      return angle * Math.PI / 180;
    }
  },
  beforeDestroy() {
    window.removeEventListener('mousedown');
    window.removeEventListener('mousemove');
    window.removeEventListener('mouseup');
  }
}
</script>

这样使用Vue与Three.js结合，就可以实现模型拖动的效果了。注意要在使用前引入Three.js的相关库，如`three.js`和`OBJLoader.js`等。