Moving in a WebVR Three.JS Scene – Quick Fix

I’m in the process of writing an ASP.NET web application using Three.JS and WebVR, specifically with the webvr-boilerplate library from Borismus on GitHub, and wanted to share the small change I’ve used to quickly set up a basic movement mechanism for the camera. This isn’t an intensive tutorial on getting set up with WebVR or Three.JS, though those will come later – but if you’re working on a WebVR boilerplate project and want a quick way to get the camera moving around for debugging, this might help you out.

In the webvr-polyfill.js file, find the MouseKeyboardPositionSensorVRDevice.prototype.onKeyDown_ line
(for me, this was at line 284 with no other changes to the file). Remove the checks for the keycodes after the or-statement ( | | ) – these are for the WASD keys and I use these for moving within the scene, rather than the look functionality.

In the JavaScript file where you declare your Three.JS scene, add in a document.onkeydown check in your camera initialization function:

 document.onkeydown = function (e) {
 if (e.keyCode == 87) { // Move forward incrementally with W
 camera.translateZ(-.1);}
 }

Once you have the function with a forward option, you can add in additional checks for the onkeydown keyCode to move in different directions. You may need to tweak the .translateZ value depending on what fits your scene & the scale.

An example that assigns values to all WASD keys:

document.onkeydown = function (e) {
 if (e.keyCode == 87) { // Move forward incrementally with W
 camera.translateZ(-.1);
 }
 else if(e.keyCode == 65) { //Move left incrementally with A
 camera.translateX(-.1);
 }
 else if (e.keyCode == 68) { //Move right incrementally with D
 camera.translateX(.1);
 }
 else if (e.keyCode == 83) { //Move left incrementally with S
 camera.translateZ(.1);
 }
 }

Related Posts

2 thoughts on “Moving in a WebVR Three.JS Scene – Quick Fix

  1. In the webvr-polyfill.js file, find the MouseKeyboardPositionSensorVRDevice.prototype.onKeyDown_ line
    (for me, this was at line 284 with no other changes to the file). Remove the checks for the keycodes after the or-statement ( | | )

    Could you perhaps explain this in detail? For someone who is incredibly new to VR, I have no idea what’s going on here.

    document.onkeydown = function (e) {
    if (e.keyCode == 87) { // Move forward incrementally with W
    camera.translateZ(-.1);}
    }

    Where do I even put this?

    If you’re using the standard webvr-boilerplate, why not show specifically where these lines of code go?

    It would be great to get movement going so that I can actually spend time building out the world. I’m a designer, not a mathematician!

    • Hi Martin!

      This post was a pretty quick note that I wanted to post when I didn’t have the time to go into more detail, but I’m happy to explain further, though a lot has likely changed since this was posted. I didn’t show exactly in the boilerplate where to insert this, because the template is iterated on regularly and the approach is more important than the specifics, but for me, this was at line 284 in the webvr-polyfill.js file. Where this is now is likely different, because the WebVR boilerplate code is very much under development and changes frequently. It looks like the most recent version of the code is much shorter than it was when I worked on this.

      When I wrote this, the default behavior of the WASD keys was to look with the camera. This is already supported with the mouse functionality, so I decided to change this to support movement in the scene. The general idea is that the webpage is capturing the key presses with document.onkeydown, and e.keyCode is giving which key has been pressed. camera.translateZ(-.1) is changing the position of the camera by moving it -.1 unit, in this case, forward.

      It looks like the latest version of the boilerplate code has a bower component that includes first person camera behavior, but this code here is several months old. If you can find in your version of the project where the onkeydown functions are being checked, you can add this in there. However, this is a quick fix and isn’t really great for a smooth camera movement, so I’d suggest that a more comprehensive first person character library would be more helpful. This repository might be useful to look at: https://github.com/josdirksen/learning-threejs/blob/master/chapter-09/07-first-person-camera.html.

      If you’d prefer a visual environment to work in, rather than pure JavaScript, Vizor Create (http://vizor.io) is a pretty interesting drag and drop editor for designing VR experiences that has this sort of behavior built in.

      Hope that helps a bit, sorry I can’t be a little more specific right now.

Leave a Reply

Your email address will not be published.