How can I move the camera in ThreeJS relative to perspective?

2
votes

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.

1
javascriptcamerathree.jsgoogle-cardboard

1 Answers

0
votes

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