Three.js上的平滑相机控制切换

Question

Three.js上的平滑相机控制切换

4

我正在开发一个网站，用户可以使用VR控件查看天空中的物体，并使用Trackball控件深入了解他们最喜欢的物体，该控件通过单击物体进行初始化。这是演示链接：https://jsfiddle.net/tushuhei/4f1Lum5n/6/

function focus (obj, target) {
  var dummyCamera = camera.clone();
  controls = new THREE.TrackballControls(dummyCamera);
  controls.target.set(obj.point.x, obj.point.y, obj.point.z);
  new TWEEN.Tween(camera.position)
    .to(target, 1000)
    .onComplete(function() {
      transitioning = false;
      controls.dispose();
      controls = new THREE.TrackballControls(camera);
      controls.target.set(obj.point.x, obj.point.y, obj.point.z);
  }).start();
}

TWEEN可以很好地实现从WebVR模式到Trackball模式的转换，反之亦然，但是在转换结束时仍存在一些小差距。我猜这是由于相机旋转在转换完成阶段存在的间隙造成的。

是否有方法使两种不同相机控制之间的过渡平滑，同时考虑相机位置和旋转？

谢谢！

- Shuhei Iitsuka

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- brianpeiris · Accepted Answer

你对dummyCamera的使用方法已经正确。你需要获取最终四元数，并在tween处理位置的同时，对初始四元数和最终四元数进行球面线性插值（slerp）。

// Save the initial quaternion so that we can use it as a 
// starting point for the slerp.
var startQuaternion = camera.quaternion.clone();

// Apply the tracking controls to a cloned dummy camera so 
// that we can get the final quaternion.
var dummyCamera = camera.clone();
dummyCamera.position.set(target.x, target.y, target.z);
var dummyControls = new THREE.TrackballControls(dummyCamera);
dummyControls.target.set(obj.point.x, obj.point.y, obj.point.z);
dummyControls.update();

// Disable VR controls, so that it doesn't compete with 
// the tween for control  of the camera.
// (Note: now you need to check if the controls are 
// null in the animate function)
controls.dispose();
controls = null;

new TWEEN.Tween(camera.position)
.to(target, 1000)
.onUpdate(function (timestamp){
  // Slerp the camera quaternion as well. 
  // timestamp is the eased time value from the tween.
  THREE.Quaternion.slerp(
    startQuaternion, dummyCamera.quaternion, camera.quaternion, timestamp);
})
.onComplete(function() {
  controls = new THREE.TrackballControls(camera);
  controls.target.set(obj.point.x, obj.point.y, obj.point.z);
}).start();

https://jsfiddle.net/4f1Lum5n/10/

顺便提一下，你目前实现的方式可能会导致VR用户晕眩。通常来说，接管用户视角控制是不良实践。一个替代方案可能是将用户置于飞船或平台上，并缓慢移动平台，这样用户始终可以控制相机。