让three.js的OrbitControl相机锁定移动的物体

一般情况下，threejs官方提供的OrbitControl组件的坐标系有一些问题，让相机跟踪移动的物体时会出现极为混乱的情况。

box.add(camera);
controls = new THREE.OrbitControls(camera, element);
//...   移动box的代码
//之后通过OrbitControl移动照相机，显示不正常

解决方案：再增加一个假相机，供OrbitControl旋转处理。普通camera跟随box移动。

box.add(camera);
fakeCamera = camera.clone();

controls = new THREE.OrbitControls(fakecamera, element);

//...   移动box的代码

//在每次render时复制假相机，供render使用
camera.copy(fakeCamera);
renderer.render(scene, camera);

参考

Forcing OrbitControls to navigate around a moving object (almost working) – Stack Overflow

2021年2月18日更新：可以使用开源库camera-controls代替OrbitControl解决该问题，并且前者提供更多的API，更容易深度定制。

欢迎来到Yari的网站：yar2001 » 让three.js的OrbitControl相机锁定移动的物体