How to move three JS cubes with keyboard input?
The following code is what I have written so far, using three js to try to move or translate the rotating cube object up, down, left, and right with the WASD keys and restore it to its original position (in the middle). screen) with a space. I am very new to the three JS and I cannot figure out how to get the movement to work. 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();
It's just a Javascript file. I also have a separate HTML file to run. 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>
source to share
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 an object, you must reposition the object. Also, calibrate xSpeed
and ySpeed
according to your needs.
source to share
Repeat the call to the render method on the pressed event:
function onDocumentKeyDown(event) {
...
render();
};
The problem was that you were updating the values, but ThreeJS does not automatically update the view, when something changes, you have to tell it to re-render.
Edit: In your render method, you are only changing the rotation properties, so the cube will only rotate. You also need to specify the new position of the cube three times.
I don't think your "xSpeed" and "ySpeed" solution will work, you need to actually add / subtract from the position.x and position.y values.
source to share