Three.js Move object forward without translateZ

Question

Like in lots of other similar questions, I want to move an object forward in three.js based on its rotation. The difference is, I can't use object.translateZ . This is because I'm using a physics simulator and it will mess up if I update the object like that. Here is an example fiddle of my problem. Feel free to play around with my fiddle and add your updated version to your answer.

I would like the cube to move forward by updating mesh.position.x and mesh.position.z based on mesh.rotation.y .

To keep in mind, I've sometimes realized that three.js rotations are a little weird some times when accessing them using mesh.rotation.y .

Thanks!

Answer 1

I would suggest using the mesh.getWorldDirection() to get a direction where you want to move your mesh. Then you can multiply it with a scalar to adjust movement speed.

direction = mesh.getWorldDirection();

mesh.position.add(direction.multiplyScalar(moveSpeed));

Fiddle: https://jsfiddle.net/k1swrxjr/1/

Good luck!

Answer 2

To move your mesh simply increment the value of the position in which you want your mesh to go in you animate() function instead of init function, example as follows:

function animate() {
        mesh.position.x += 0.1;
        requestAnimationFrame( animate );
        renderer.render( scene, camera );
    }

This example code will increase x position of your mesh by 0.1 every time animate() is run.