让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相机锁定移动的物体

评论

6+3=