Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to move an object forward in Three.js?

Is there any way to move an object forward in Three.js?

Maybe I should convert the rotation.x,y,z to a vector, and deal with it. But I'm beginner, and I don't have any idea how to do it.

like image 394
eqiproo Avatar asked Jun 20 '12 20:06

eqiproo


People also ask

How do you move an object in JavaScript?

Move object (image) with arrow keys using JavaScript function - In this example we will learn how to move object/image using arrow keys (left, top, right and down). We will call function in Body tag on "onkeydown" event, when you will down arrow keys object will be moved on the browser screen.

How do I move the camera in 3 js?

Click and drag camera. The first issue that needed to be resolved was the click and drag camera movement. Three. js offers a couple of base camera views to get us started.


2 Answers

Object3D has some handy methods for that.

object.translateZ( 10 ); 
like image 137
mrdoob Avatar answered Sep 21 '22 03:09

mrdoob


Please use above answer of @mrdoob, creator of ThreeJS:

object.translateZ( delta );

===OLD ANSWER===

A tutorial that worked for older ThreeJS version: http://www.aerotwist.com/tutorials/getting-started-with-three-js/

// set position of YOUR_OBJECT YOUR_OBJECT.position.x = 10; YOUR_OBJECT.position.y = 50; YOUR_OBJECT.position.z = 130; 

More options:

var STEP = 10; var newCubeMatrix = cube.matrix;         newCubeMatrix.identity(); //newCubeMatrix.multiplySelf(THREE.Matrix4.rotationYMatrix(cube.rotation.y)); newCubeMatrix.multiplySelf(THREE.Matrix4.translationMatrix(cube.position.x, cube.position.y, cube.position.z + STEP)); cube.updateMatrix(); 

details posted here https://gamedev.stackexchange.com/questions/7490/translate-object-in-world-space-usings-its-local-rotation

like image 42
Eugene Hauptmann Avatar answered Sep 18 '22 03:09

Eugene Hauptmann