vue + three js 相机漫游中调整相机角度

在Vue.js和Three.js结合的场景中，要实现相机的漫游并调整其视角，你需要首先设置一个Three.js的Camera组件，然后通过事件监听或者定时器更新相机的位置和旋转。以下是一个简化的步骤：

1. **创建相机**：

   const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

2. **绑定视图更新函数**：

   export default {
     data() {
       return {
         rotationX: 0,
         rotationY: 0,
       };
     },
     methods: {
       updateCamera() {
         camera.position.x = ...; // 设置相机位置
         camera.position.z = ...; // 长度取决于你的场景布局
         camera.rotation.y = this.rotationY;
         camera.rotation.x = this.rotationX;
         // 渲染场景
         this.$refs.scene.updateMatrixWorld();
         this.$refs.renderer.render(this.$refs.scene, camera);
       },
     },
     mounted() {
       this.updateCamera(); // 初始化一次
     },
     watch: { // 观察rotationX和rotationY的变化
       rotationX(newVal) {
         this.updateCamera();
       },
       rotationY(newVal) {
         this.updateCamera();
       },
     },
   }

3. **处理用户交互**（例如鼠标滚轮或触摸事件）来改变`rotationX`和`rotationY`变量，这将改变相机的角度。

4. **额外提示**：
- 使用`THREE.OrbitControls`可以更方便地控制相机的移动和旋转。
- `this.$refs`通常用于获取渲染到DOM元素的引用，如`<div id="canvas"></div>`。