首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Three.js上平滑的摄像机控制开关

Three.js上平滑的摄像机控制开关
EN

Stack Overflow用户
提问于 2015-12-17 00:09:35
回答 1查看 2.1K关注 0票数 4

我正在开发一个网站,允许用户使用VRControls查看天空中的对象,并使用Trackball控件查看他们最喜欢的对象,该控件是通过单击对象初始化的。这是演示。https://jsfiddle.net/tushuhei/4f1Lum5n/6/

代码语言:javascript
复制
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();
}

吐温很好地完成了从WebVR到Trackball模式的转换,反之亦然,但在过渡结束时仍然存在一些差距。我想这是因为在过渡完成阶段相机旋转的间隙。

考虑到相机的位置和旋转,是否有任何方法可以使两种不同的摄像机控制之间的过渡顺利?

谢谢,

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-12-17 04:31:56

你和dummyCamera走在正确的轨道上。你需要得到最后的四元数,在初始的四元数和最后的四元数之间,而中间的四元数处理位置。

代码语言:javascript
复制
// 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用户带来很多恶心。接管用户观点的控制通常是不好的做法。另一种解决方案可能是将用户放在宇宙飞船或平台上,然后在平台之间切换,这样用户就可以随时控制摄像机。

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/34324495

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档