Menu
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>
606
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.
85
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
