相對於視角，我如何在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