How do I move a Three JS cube with keyboard input?
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>
Answer
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.