使用 DeviceOrientationControls 的键盘控件

Question

我目前正在使用 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 纸板 three.js 演示代码，其中添加了检测按键的功能）

Answer 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)
*/

使用 DeviceOrientationControls 的键盘控件

Keyboard Controls With DeviceOrientationControls

javascript

three.js

google-cardboard

virtual-reality

最简单的例子：