使用DeviceOrientationControls的键盘控件

时间:2015-06-01 04:42:40

标签: javascript three.js google-cardboard virtual-reality

我目前正在使用 three.js 创建VR网络应用。由于相机控制我正在使用google纸板three.js演示中的设备方向控件used here

我需要做的是为此添加键盘控件(例如向上箭头等)。我在这里用两个轴(x和z)移动相机摆弄了一下:

if (e.keyCode == '38') {
    camera.position.set(0, 10, camera.position.z+4);

    controls.target.set(
        camera.position.x +4,
        camera.position.y,
        camera.position.z
    );
    effect.render(scene, camera);
...

但是我想让角色相对于他们正在寻找的位置移动(例如,你看向一个方向并按向上箭头,角色按你所看的方式移动)。像第一人称视角。

有没有人对如何做到这一点有任何想法?香港专业教育学院尝试使用three.js的第一人控制,但这消除了头部跟踪,这是VR游戏必不可少的。

任何答案都将不胜感激。 (我的源代码实际上只是Google纸板的三个.js演示代码,其中添加了一个功能,也检测到按键)

1 个答案:

答案 0 :(得分:1)

我用不同的方法解决了这个问题。我创建了一个在场景中移动的object3d。模型和相机是这个对象的孩子。

我用相机旋转物体3d,同时在相反方向旋转模型。当我旋转相机对象看起来保持方向。当我想移动物体时,只需用相机对象translateX并将模型旋转到0.这样就可以了。

长距离(我有数百万单位)开始变得生涩。原因是精度损失。

我通过将对象的位置保持在0,0,0并将所有其他东西向相反的方向移动来解决它。这使得你的模型仍然在正确旋转的0,0,0坐标上,世界正在四处移动。

最简单的例子:

你尝试过像

这样的事情
scene.add(character_model);
scene.add(camera);
//camera.rotate ....
character_model.translateX(1);
character_model.rotateX(1);
//etc ...

现在你试图围绕枢轴(character_model)移动相机,但这是过于复杂的数学。

尝试:

var controls_dimension = new THREE.Object3D();
scene.add(controls_dimension);
controls_dimension.add(character_model);
controls_dimension.add(camera);

//use controls to rotate with this object, not with character_model
controls_dimension.rotateX(2);

// in the same rotate model to opposite direction. You can make 
// illusion of rotating camera, not a model.
character_model.rotateX(2*-1);

/* 
when you want to go in camera direction=controls_dimension=controls_dimension.translateX(1) 
and we moving (you most only animate model rotation to controls_dimension.rotation)
*/