ThreeJS中OrbitControls已导入引用且无报错但无法正常工作

你的OrbitControls无法生效的核心原因是相机初始位置与OrbitControls的目标点重合——相机在(0,0,0)，OrbitControls默认的旋转目标也是(0,0,0)，此时相机绕自身旋转，视角不会有任何变化，看起来就像控件没生效。

第一步：调整相机初始位置 #

修改相机位置，让它远离原点，比如：

camera.position.set(0, 10, 50); // 把相机移到z轴50的位置，y轴10的高度
controls.update(); // 位置变化后更新控件

其他可能的排查点 #

如果调整相机位置后还是没效果，可以检查以下几点：

• Canvas是否被遮挡：确保渲染用的canvas元素没有被其他DOM元素覆盖（比如z-index层级过低），导致鼠标/触摸事件无法传递到canvas。可以给canvas加临时边框确认：

  #bg {
    border: 2px solid red;
    position: absolute;
    top: 0;
    left: 0;
  }
  

• 触摸设备的尺寸设置问题：你用screen.width/screen.height设置renderer尺寸，这可能导致canvas实际显示尺寸和事件响应区域不匹配。建议统一用window.innerWidth/window.innerHeight，并添加窗口 resize 监听：

  function handleResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  window.addEventListener('resize', handleResize);
  

• 确认OrbitControls的基础配置：可以显式开启控件的交互功能（默认是开启的，但可排查）：

  controls.enableDamping = true; // 可选，添加阻尼让旋转更平滑
  controls.enablePan = true; // 允许平移
  controls.enableZoom = true; // 允许缩放
  

修复后的关键代码片段 #

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.1,
  renderDistanceMax
)

// 调整相机位置到远离原点的位置
camera.position.set(0, 10, 50);
const controls = new OrbitControls(camera, renderer.domElement);
// 可选：自定义旋转目标（默认是(0,0,0)）
// controls.target.set(0, 0, 0);
controls.update();

function animate() {
  requestAnimationFrame(animate);
  controls.update();
  renderer.render(scene, camera);
}

animate();

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