在Three.js中,在使用WebVR时,如何移动摄像机位置?

时间:2018-03-25 01:26:49

标签: three.js google-vr webvr daydream

我正在尝试调整现有的three.js项目以使用WebVR。我已经取得了不错的进展 - 我可以在VR中环顾四周,但是我无法将相机位置移离它产生的初始位置(这似乎接近{{1} },似乎有一个预先设定的0,0,0被考虑在内)

一旦我拨打userHeight,就会创建一个新摄像头,并且不再使用我的场景正在使用的现有摄像头。我想继续使用那台相机,或至少继承其大部分属性。

我注意到有一种renderer.vr.setDevice( vrDisplay )方法(link to source),但我还没有找到任何关于如何使用它的示例或文档(或者我是否应该使用它) )。奇怪的是,这个方法接受renderer.vr.getCamera()作为参数,这对于camera来说有点不直观。看一下代码,看起来这个函数应该被称为getter,让我有点困惑。我尝试调用该函数并传入现有的setCamera,但它没有效果。

感谢任何帮助。我在使用Three.js R91的最新版本的Android / Chrome上使用Google Daydream View

2 个答案:

答案 0 :(得分:1)

您可以尝试这样的事情:

var user = new THREE.Group();
user.add( camera );

然后你可以在动画循环中转换user / dolly对象。

用于VR渲染的大多数相机属性由API提供,例如右眼和左眼的投影矩阵。阅读.getFrameData()的文档以获取更多信息。

答案 1 :(得分:0)

swirlybuns,只要您将用户添加到场景中,Mugen87解决方案就可以工作

var user = new THREE.Group();
user.position.set(0,0,0);
camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.y = 1.6;
user.add( camera );
scene.add(user);

并在渲染循环上

user.position.setZ(camera_z_pos);
camera_z_pos -= current_velocity;

经过测试 Three.js v102 chrome mobile v75