我正在开发一个网站,允许用户使用VRControls查看天空中的对象,并使用轨迹球控件查看他们喜欢的对象,通过单击对象进行初始化。这是演示。 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模式的转换,反之亦然,但在转换结束时仍然存在一些差距。我想这来自过渡完成阶段相机旋转的间隙。
考虑到相机的位置和旋转,是否有任何方法可以使两个不同的相机控制之间的过渡平滑?
谢谢,
答案 0 :(得分:3)
你使用dummyCamera走在正确的轨道上。当补间处理位置时,你需要在初始四元数和最终四元数之间得到最终的四元数和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/
P.S。到目前为止,你实现这一点的方式可能会给VR用户带来很多恶心。接管用户的观点通常是不好的做法。另一种解决方案可能是将用户放在太空飞船或平台上,改为替换平台,以便用户始终控制摄像头。