在ThreeJS中使用TrackballControls时如何通过按钮无冲突实现相机翻滚？

核心原因 #

TrackballControls会维护一套独立的相机状态基准（position0、target0、up0）和交互累计数据，controls.update()会基于这些内部状态更新相机。直接修改相机属性后，若不同步Controls的内部状态，后续update()会将相机重置回Controls记录的旧状态，导致手动翻滚失效。

可行解决方法 #

方法一：同步相机状态到Controls基准并重置 #

在手动执行翻滚后，将当前相机状态设为Controls的新基准，再重置Controls，让后续交互基于新状态进行：

camera = new THREE.PerspectiveCamera(...);
controls = new TrackballControls(camera);

function roll(angle) {
    // 临时禁用Controls，避免操作过程中被干扰
    controls.enabled = false;

    // 执行相机翻滚逻辑
    const quaternion = new THREE.Quaternion();
    const lookat = camera.position.clone().negate().normalize();
    quaternion.setFromAxisAngle(lookat, THREE.MathUtils.degToRad(angle));
    camera.applyQuaternion(quaternion);

    // 将当前相机状态设为Controls的新基准
    controls.position0.copy(camera.position);
    controls.target0.copy(controls.target); // 保持观察目标不变
    controls.up0.copy(camera.up);
    // 重置Controls，使其以当前状态为交互起点
    controls.reset();

    // 重新启用Controls
    controls.enabled = true;
}

方法二：手动同步Controls内部状态 #

修改相机后，直接更新Controls的基准状态并触发状态变更事件，让Controls感知相机的手动修改：

function roll(angle) {
    const quaternion = new THREE.Quaternion();
    const lookat = camera.position.clone().negate().normalize();
    quaternion.setFromAxisAngle(lookat, THREE.MathUtils.degToRad(angle));
    
    // 应用旋转到相机
    camera.quaternion.multiply(quaternion);
    camera.updateMatrixWorld();

    // 同步Controls的基准状态，避免后续update覆盖手动修改
    controls.position0.copy(camera.position);
    controls.rotation0.copy(camera.rotation);
    controls.up0.copy(camera.up);

    // 触发Controls的状态变更事件
    controls.dispatchEvent({ type: 'change' });
}

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