// 初始化控制器 const controls = new THREE.OrbitControls(camera, renderer.domElement); // 监听控制器变化 controls.addEventListener('change', () => { console.log('相机位置改变了'); });也不生效

可能是因为你没有在渲染循环中调用控制器的 update 方法。你可以在渲染循环中添加如下代码：

function animate() {
  requestAnimationFrame(animate);
  controls.update(); // 更新控制器
  renderer.render(scene, camera);
}
animate();

这样控制器就能够生效了。同时，你也可以在控制器的构造函数中传入一个参数 `autoRotate`，设置为 `true` 就可以自动旋转了。例如：

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.autoRotate = true;

相关问题

// 监听相机位置的变化 camera.addEventListener('change', () => { console.log('相机位置改变了'); });无效

可能是因为 `change` 事件只在相机的内部状态发生变化时才会触发，例如相机的位置、朝向、投影矩阵等发生变化时。如果你是通过交互操作改变了相机的位置，例如拖拽、滚轮缩放等，那么应该监听 `controls` 对象的变化事件，例如：

// 初始化控制器
const controls = new THREE.OrbitControls(camera, renderer.domElement);

// 监听控制器变化
controls.addEventListener('change', () => {
  console.log('相机位置改变了');
});

这样就可以在用户交互操作时实时监听相机位置的变化了。

three.js视角跟随鼠标

在three.js中，实现视角跟随鼠标的功能通常涉及到处理用户的输入事件和调整摄像机的位置。以下是一个简单的步骤：

1. 首先，你需要创建一个`OrbitControls`实例，它允许你控制场景的视角，包括平移、旋转和缩放。你可以通过以下代码引入并初始化它：

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

const controls = new OrbitControls(camera, renderer.domElement);

2. 接下来，将相机的`target`属性设置为场景中心或其他固定的点，以便初始位置不会随鼠标移动。

camera.position.set(0, 0, 5); // 设置相机位置
camera.target.set(0, 0, 0); // 设置目标点为原点

3. 然后，在渲染循环中启用控制更新：

function animate() {
    requestAnimationFrame(animate);

    // 更新控制
    controls.update();

    renderer.render(scene, camera);
}

animate();

4. 当鼠标移动时，`OrbitControls`会自动处理视角变化。如果需要精确地跟踪鼠标位置，可以监听鼠标事件并在回调函数中手动更新摄像机的位置，但是这通常是不必要的，因为`OrbitControls`已经为你做了大部分工作。

如果你想限制视角只在水平面上移动（例如，保持垂直方向不变），可以在控制类初始化时设置相应选项：

controls.enableDamping = true; // 添加阻尼效果，模拟真实世界的运动
controls.dampingFactor = 0.25;
controls.maxPolarAngle = Math.PI / 2; // 限制最大垂直角度