After spending some time fine-tuning the camera movement in my three.js project, I am now ready to introduce movement. Initially, I attempted to use camera.translateZ(movementSpeed), but this caused the camera to fly, and I want to constrain the movement to the x and z axes. I thought about using the cosine and sine of the camera's y rotation to determine the z and x velocity. While this method worked well for the first half of rotation, it failed during the second half. Is there a more effective approach, or is there a way to fix this issue?
You can access the code on http://jsfiddle.net/zLa78yqw/2/, where I have added a ball to indicate where the camera would land when moving forward.
The code I am using to calculate the delta z and x values is:
var zvel=Math.cos(camera.rotation.y);
var xvel=Math.sin(camera.rotation.y);
testBall.position.z=camera.position.z-zvel*2;
testBall.position.x=camera.position.x-xvel*2;
I have been struggling with this issue for some time now and would appreciate any assistance.
TLDR: Seeking help in moving an object forward in three.js without changing its height.