Three.js OrbitControls问题：设置相机高度后旋转中心偏移

问题核心：OrbitControls的旋转中心由target属性控制，默认值为(0,0,0)。你之前仅通过camera.lookAt()设置相机朝向，但修改相机位置后，Controls的target并未自动同步到你期望的点，导致旋转中心偏离。

解决方案 #

直接手动设置OrbitControls.target为固定坐标，确保无论相机位置如何变化，旋转中心始终锁定在指定点。

修改后的代码 #

const init = () => {
    scene = new THREE.Scene();
    scene.background = new THREE.Color("whiteSmoke");

    renderer = new THREE.WebGLRenderer({ antialias: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.shadowMap.enabled = true;

    camera = new THREE.PerspectiveCamera(90, window.innerWidth / window.innerHeight, 0.1, 100);
    // 先设置相机位置
    camera.position.y = 2;
    camera.position.z = 0.01;
    // 定义要围绕旋转的中心点
    const rotateCenter = new THREE.Vector3(0, player.height, 0);
    // 让相机朝向旋转中心
    camera.lookAt(rotateCenter);

    controls = new OrbitControls(camera, renderer.domElement);
    controls.enableDamping = true;
    controls.enableZoom = false;
    controls.rotateSpeed = -0.30;
    controls.enablePan = false;
    // 手动绑定Controls的旋转中心
    controls.target.copy(rotateCenter);
    // 更新Controls确保设置生效
    controls.update();

    scene.add(camera);

    // 坐标轴辅助
    const axesHelper = new AxesHelper(20);
    scene.add(axesHelper);

    loadModels(scene)

    animate();
};

const animate = () => {
    requestAnimationFrame(animate);
    // 启用阻尼时必须在每一帧调用update
    controls.update();
    renderer.render(scene, camera);
};

const onWindowResize = () => {
    controls.handleResize();
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
init();

关键修改说明 #

• 调整相机位置与朝向的设置顺序，避免坐标同步异常
• 将controls.target与camera.lookAt的目标点保持一致，锁定旋转中心
• 启用阻尼后，必须在animate循环中调用controls.update()，保证Controls状态正常更新

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