2

Question:

I've been working on a first-person maze game with Threejs. I have recently included DeviceOrientationControls to start moving it towards VR, but my previous system for moving the camera is separated from the camera. The camera no longer moves with the arrow keys.

  • How can I move my camera using arrow keys again while the camera is updated with DeviceOrientationControls?
  • If possible, how can I automate forward movement relative to the camera's perspective?

Update:

Alex Fallenstedt found a perfect example of what I wanted.

However, I have some questions;

  • How does the script make the camera move?
  • How can I simplify this and/or implement this into my work?

Resources:

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

Comparison:

Here's how it behaved prior (with working controls) http://orenda.ga/stackoverflow/Nonvr.mp4

Here's how it behaves now (with Orientation) http://orenda.ga/stackoverflow/VR.mp4

Note: I've not included my script since I think that it isn't needed for this question. If you need it, please ask and I will insert it here.

Community
  • 1
  • 1

1 Answers1

1

To answer you two questions:

1) How does the script make the camera move?

Lets break the script up to its fundamentals. The script begins by adding a bit of state to determine if the user is moving forward.. This state changes when the user interacts with 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.. Now, every single frame that is rendered, we can add velocity in specific directions depending on the state of what keys are pressed. This happens here. We now have a concept of velocity. You should console log the velocity values in animate() and checkout how it changes as you move around.

So how does this velocity variable actually move the camera? Well, this script is also using an additional script called PointerLockControls. You can see the full script for PointerLockControls here. Notice how PointerLockControls' only argument is a camera. In order to move the camera, we need to use some nifty functions in PointerLockControls like getObject.. This returns the THREE.js object that you passed into PointerLockControls (aka the camera).

Once we can obtain the camera, we can then move the camera by translating its x, y, and z values by the velocity we created earlier in our animate function.. You can read more about translating objects with these methods in in the Object3D documentation.

2) How can I simplify this and/or implement this into my work?

This is probably the easiest way to implement first person controls to a camera. Everything else in the script example I shared with your earlier is for checks. Like if the user is in a threeJS object, allow them to jump. Or adding a concept of mass and gravity to always pull the user down after they jump. One thing that you might find very useful is to check if the pointer is in the browser's window!. Take the example, break it down to its simplest components, and build from there.

Here is a codepen example that shows you how to move the camera forward smoothly, without pointerlockcontrols, Start at line 53 https://codepen.io/Fallenstedt/pen/QvKBQo

Alex Fallenstedt
  • 2,040
  • 1
  • 18
  • 34
  • Sorry about the videos, I put them in the wrong folder on my server. –  Apr 24 '17 at 19:33
  • How does `velocity.x -= velocity.x * 10.0 * delta;` move the camera? I tried to implement this, but I need to understand it first. –  Apr 24 '17 at 19:45
  • @CodyBennett. Check out this codepen I made for you. Please go to `line 53` where I start defining variables and ways to move the camera. Click on the canvas, and press `w` or `up` to move the camera forward. You'll notice it moves forward as long as you press either of the keys, and stop once you release. https://codepen.io/Fallenstedt/project/editor/ZqvOoX/ The line you talked about is what stops the camera from moving in a specific direction. If you did not have this line, velocity would not be set 0 after releasing the key, causing the camera to move in a direction forever! – Alex Fallenstedt Apr 24 '17 at 20:53
  • @CodyBennett Incase that project goes down, here is a codepen instead that does a very basic example. Try commenting out the `velocity.z -=...` line and see what happens you press `w` once. https://codepen.io/Fallenstedt/pen/QvKBQo – Alex Fallenstedt Apr 24 '17 at 21:12
  • 1
    Thank you for the example and your guide, very much appreciated. –  Apr 24 '17 at 21:40
  • @CodyBennett Anytime. Let me know if you run into any other hurdles. – Alex Fallenstedt Apr 24 '17 at 22:06