Three.js实现鼠标指向位置缩放时OrbitControls无法更新的问题

问题分析 #

你已通过Raycaster正确获取鼠标交点，但OrbitControls的目标未同步更新，直接修改相机位置又导致相机失控。核心问题在于对OrbitControls的target属性使用方式有误，且缺少必要的循环更新逻辑。

关键修正点 #

1. 正确设置OrbitControls.target #

controls.target是Vector3属性，不是方法，不能用this.controls.target(xxx)的方式调用。正确的赋值方式是使用copy方法：

onPointerMove(event){
    const pointer = {
        x: (event.clientX / window.innerWidth) * 2 - 1,
        y: -(event.clientY / window.innerHeight) * 2 + 1,
    }
    this.rayCaster.setFromCamera(pointer, this.camera_);
    const intersects = this.rayCaster.intersectObjects(this.scene_.children, false);
    if (intersects.length > 0) {
        // 直接复制交点坐标到controls的目标向量
        this.controls.target.copy(intersects[0].point);
        // 立即更新Controls状态
        this.controls.update();
    }
}

2. 在动画循环中持续调用controls.update() #

OrbitControls需要在每帧渲染时同步状态，仅在鼠标移动时调用一次update()可能无法持久生效。必须在你的渲染循环中加入这行代码：

function animate() {
    requestAnimationFrame(animate);
    // 每帧更新Controls，确保目标和相机状态同步
    this.controls.update();
    this.renderer.render(this.scene_, this.camera_);
}

3. 避免事件冲突 #

将pointermove事件绑定到Three.js的Canvas元素而非document，避免和OrbitControls自身的鼠标事件冲突：

// 替换原绑定代码
this.threejs_.domElement.addEventListener('pointermove', (e) => this.onPointerMove(e), false);

4. 禁止直接修改相机位置 #

OrbitControls会自动管理相机位置，直接调用camera.position.set()会破坏Controls的控制逻辑，导致相机失控。所有相机定位操作都应通过修改controls.target和调整minDistance/maxDistance完成。

额外注意事项 #

• 如果开启了controls.enableDamping = true，必须在动画循环中调用controls.update()，否则阻尼效果和目标更新都会失效。
• 确认intersectObjects的第二个参数：如果你的模型是嵌套层级结构，需要设置为true以递归查找子对象（你当前设置为false，但已能获取交点，说明模型结构符合要求）。

内容的提问来源于stack exchange，提问作者Icarus