How do I move a Three JS cube with keyboard input?

Question

The following code is what I have written so far using three js to try to move or translate a rotating cube object up, down, left, and right with the WASD keys, and reset to the original position (middle of the screen) with the space bar. I am very new to three js and I can not figure out how to get the movement working. Any help would be greatly appreciated. This is what I have so far:

// first 5 lines are a template and should be pretty much the same always
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// end template here

var geom = new THREE.BoxGeometry(10, 10, 10);
var mat = new THREE.MeshBasicMaterial({color: "red"});
var cube = new THREE.Mesh(geom, mat);

scene.add(cube);
camera.position.x = 2;
camera.position.y = 1;
camera.position.z = 20;

var light = new THREE.AmbientLight( 0x404040 ); // soft white light
scene.add( light );

// White directional light at 70% intensity shining from the top.
var directionalLight = new THREE.DirectionalLight( 0xffffff, 0.7 );
scene.add( directionalLight );

// movement
document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    // up
    if (keyCode == 87) {
        cube.position.y += 1;
        // down
    } else if (keyCode == 83) {
        cube.position.y -= 1;
        // left
    } else if (keyCode == 65) {
        cube.position.x -= 1;
        // right
    } else if (keyCode == 68) {
        cube.position.x += 1;
        // space
    } else if (keyCode == 32) {
        cube.position.x = 0.0;
        cube.position.y = 0.0;
    }
    render();
};

var render = function() {
  requestAnimationFrame(render);
  cube.rotation.x += 0.03;
  cube.rotation.y += 0.02;
  cube.rotation.z += 0.01;
  renderer.render(scene, camera);
};

render();

This is just the Javascript file. I also have a separate HTML file to launch from. Here is the HTML:

<html><head><title>WebGL with three.js</title>
<style>
  body { margin: 0; }
  canvas { width: 100%; height: 100% }
</style>
</head><body>
<script src="three.js"></script>
<script src="Learn_Cube3.js"></script>
</body></html>

If you want to change it's position, I'd think you would need to access `cube.position.x/y/z` somewhere in your code after key presses. — Chris, Mar 22 '17 at 17:52

score 15 · Accepted Answer · answered Mar 22 '17 at 17:41

15

How about this ? -

// movement - please calibrate these values
var xSpeed = 0.0001;
var ySpeed = 0.0001;

document.addEventListener("keydown", onDocumentKeyDown, false);
function onDocumentKeyDown(event) {
    var keyCode = event.which;
    if (keyCode == 87) {
        cube.position.y += ySpeed;
    } else if (keyCode == 83) {
        cube.position.y -= ySpeed;
    } else if (keyCode == 65) {
        cube.position.x -= xSpeed;
    } else if (keyCode == 68) {
        cube.position.x += xSpeed;
    } else if (keyCode == 32) {
        cube.position.set(0, 0, 0);
    }
};

To move a object you have to change the position of the object. Also, calibrate the xSpeed and ySpeed as your need.

answered Mar 22 '17 at 17:41

Rasheduzzaman Sourov

1,375
2
15
36

1

Thank you very much! There is only one problem. For some reason no matter what key I press, the cube rotates faster and faster. The position changes the way it is supposed to but i'm not sure what part of my code is causing the cube to spin more rapidly on any of the keypresses. – Teej Mar 22 '17 at 17:52
@Tyler Remove render() from your keypress event. – Chris Mar 22 '17 at 17:54

dzylich · Answer 2 · 2017-03-22T17:51:17.300

-1

Re-call your render method in your key down event:

function onDocumentKeyDown(event) {
    ...
    render();
};

The issue was that you were updating the values, but ThreeJS doesn't automatically re-render the view when things change, you have to tell it to re-render.

Edit: In your render method, you are only modifying the rotation properties, so the cube will only rotate. You need to also tell ThreeJS the new position of the cube.

I don't think your solution of "xSpeed" and "ySpeed" will work, you need to actually add/subtract from the position.x and position.y values.

edited Mar 22 '17 at 17:51

answered Mar 22 '17 at 17:07

dzylich

346
1
14

I called render inside of the keydown, but instead of the keypresses sliding the cube along x and y it only increases the rotation speed. I think the problem is with my xSpeed and ySpeed variables but I am not sure. – Teej Mar 22 '17 at 17:14

How do I move a Three JS cube with keyboard input?

2 Answers2