Javascript 朝我看的方向移动（webvr、三js、Oculus Rift）

在animate（）函数中，我有以下代码：

  if (this.controls.forward) {

    // move in direction we look at
    var cameraDirectionVector = new THREE.Vector3(0, 0, -1);
    cameraDirectionVector.applyQuaternion(this.camera.quaternion);

    var angle = cameraDirectionVector.angleTo(this.characterMesh.position);
    this.characterMesh.translateOnAxis(cameraDirectionVector.cross(this.characterMesh.position), moveDistance);

    this.characterMesh.translateZ(-moveDistance);
  }
  if (this.controls.backward) {
    this.characterMesh.translateZ(moveDistance);
  }

摄影机是characterMesh的子对象。前后移动都很好。但我想（在飞机上）移动到我真正看的地方（只是偏航）。我找到了Unity3D的一个代码示例，并尝试将其改编为three.js，但这不起作用

---

任何帮助或提示都将不胜感激

嗯，我不确定你的计算结果是什么，但我认为你的意图最好用点积而不是叉积来实现。我进行了调整，并提出了以下解决方案。请参阅该链接以了解另一种可能更有效的方法

var YAXIS = new THREE.Vector3(0, 1, 0);
var ZAXIS = new THREE.Vector3(0, 0, 1);
var direction = ZAXIS.clone();
direction.applyQuaternion(camera.quaternion);
direction.sub(YAXIS.clone().multiplyScalar(direction.dot(YAXIS)));
direction.normalize();
character.quaternion.setFromUnitVectors(ZAXIS, direction);
character.translateZ(-moveDistance);

完整代码：

var renderer=new THREE.WebGLRenderer（{antialas:true}）；
renderer.setSize（window.innerWidth、window.innerHeight）；
document.body.appendChild（renderer.doElement）；
var vrEffect=new THREE.vrEffect（渲染器，函数（）{}）；
var摄像机=新的三视角摄像机(
75，window.innerWidth/window.innerHeight，0.11000）；
var vrControls=新的三个vrControls（摄像头）；
var scene=new THREE.scene（）；
scene.add（新的THREE.PointLight（））；
var makeCube=函数（颜色）{
返回新的三个网格(
新的三盒几何结构（1,1,1），
新的三点网格材料({
颜色：颜色
})
);
};
var间距=1.5；
对于（变量i=0；i<10；i++）{
对于（var j=0；j<10；j++）{
变量颜色=(
（i%2==0 | | j%2==0）？“绿色”：“红色”）；
var cube=makeCube（颜色）；
cube.position.z=-i*间距；
立方体位置x=j*间距；
cube.position.y=-2；
场景.添加（立方体）；
}
}
var character=new THREE.Object3D（）；
var characterBody=makeCube（'blue'）；
characterBody.position.y=-1.5；
character.add（characterBody）；
场景。添加（角色）；
var=false；
window.addEventListener（'keydown'，function（）{
移动=真；
});
window.addEventListener（'keyup'，函数（）{
移动=假；
});
var移动距离=0.1；
var YAXIS=新的三个向量3（0,1,0）；
var ZAXIS=新的三个向量3（0,0,1）；
var render=function（）{
请求动画帧（渲染）；
vrControls.update（）；
照相机.位置.复制（字符.位置）；
如果（移动）{
//朝我们看到的方向移动
var direction=ZAXIS.clone（）；
方向。应用四元数（摄影机。四元数）；
direction.sub（YAXIS.clone（）.multilyscalar（direction.dot（YAXIS）））；
方向。规范化（）；
字符。四元数。setFromUnitVectors（ZAXIS，方向）；
字符translateZ（-moveDistance）；
}
渲染（场景、摄影机）；
};
render（）；
addEventListener（'resize'，函数onWindowResize（）{
camera.aspect=window.innerWidth/window.innerHeight；
camera.updateProjectMatrix（）；
vrEffect.setSize（window.innerWidth、window.innerHeight）；
});

感谢您提供的代码和链接！这对我不起作用（也许我遗漏了一些东西），我不得不承认，当涉及向量和3J时，我是一个新手。但也许我问问题的方式不对。我想问的是，如何使用相机（HMD）的旋转信息（仅偏航）旋转我的characterMesh？如果我能做到这一点，那么按下前进键前进（现在朝着正确的方向前进）应该是可行的。基本上我想实现导航概念，就像在AltspaceVR中实现一样，我真的很喜欢…@ChrisC我已经更新了代码以符合您的要求，但这也取决于您如何将相机连接到角色。也许您最好将三个.js的FirstPersonControl与VRControls结合使用，类似于这样：我看过FirstPersonControl，但它不是我想要的。您更新的示例也不适用于我。隐马尔可夫模型。。。我在Unity3D论坛上发现了类似的问题和解决方案，并尝试在threejs中实现它们，但至今没有成功@ChrisC我很确定我的解决方案能满足你的要求。不过，将其集成到现有代码中可能是另一个问题。我必须查看更多的代码才能弄清楚发生了什么。我已经用完整的源代码编辑了我的答案。您可以在这里看到一个工作示例：再次感谢！正如你所说，你的例子效果很好。我会看看我的代码有什么问题。。。