相对于视角，我如何在ThreeJS中移动相机？

Question

问：

我一直工作在第一人称迷宫游戏Threejs。我最近包括DeviceOrientationControls开始将其移动到VR，但我以前的移动相机的系统与相机分开。相机不再使用箭头键移动。

• 如何在使用DeviceOrientationControls更新相机时再次使用箭头键移动相机？
• 如果可能的话，我怎么能自动相对于摄像机的角度向前移动？

---

更新：

Alex Fallenstedt发现什么，我想要一个完美的example。

但是，我有一些问题;

• 剧本如何让相机移动？
• 我该如何简化和/或将其实施到我的工作中？

---

资源：

How to control camera both with keyboard and mouse - three.js

Detecting arrow key presses in JavaScript

How to move camera along a simple path

How to control camera movement with up,down,left,right keys on the keyboard

---

比较：

这里是前如何表现（有工作控制） http://orenda.ga/stackoverflow/Nonvr.mp4

下面是它如何工作现在（含定向） http://orenda.ga/stackoverflow/VR.mp4

---

注意： 我还没有收录我的脚本，因为我认为这是不需要这个问题。如果你需要它，请问，我会在这里插入它。

Answer 1

要回答你两个问题：

1）脚本如何使摄像机移动？

让我们按照其基本原则打破剧本。 The script begins by adding a bit of state to determine if the user is moving forward.。当用户与W，A，S，D交互时，该状态会改变。 We add event listeners that will change this state when a user presses a key or lifts up from a key.。现在，渲染的每一帧都可以在特定的方向上添加velocity，具体取决于按下哪些按键的状态。 This happens here。我们现在有一个速度的概念。您应该在animate()的控制台中记录速度值并检查它在移动时的变化。

那么velocity这个变量是怎么实际移动摄像头的呢？那么，这个脚本is also using an additional script called PointerLockControls。您可以看到PointerLockControlshere的完整脚本。注意PointerLockControls的唯一参数是一个摄像头。为了移动相机，我们需要在PointerLockControls中使用一些漂亮的功能，如getObject.。这会返回您传递给PointerLockControls（又名相机）的THREE.js对象。

一旦我们可以获得相机，我们可以通过将其x，y和z值转换为我们之前创建的velocity来移动相机in our animate function.。您可以在Object3D documentation.

中阅读更多关于使用这些方法翻译对象的信息。2）如何简化和/或将其实施到我的工作中？

这可能是实现第一人称控制到相机的最简单的方法。我之前与您分享的脚本示例中的其他内容都是用于检查的。就像用户在3JS对象中一样，让他们跳转。或者添加一个concept of mass and gravity，以便在用户跳转后始终关闭用户。 One thing that you might find very useful is to check if the pointer is in the browser's window!。以此为例，将其分解为最简单的组件，然后从中构建。

这里是一个codepen例如，告诉您如何向前平稳地移动相机，没有pointerlockcontrols，在line 53https://codepen.io/Fallenstedt/pen/QvKBQo