13

How would you move a camera backwards and forwards from a fixed point along the trajectory that it is facing?

I know there are several control scripts that do this but I need to do something custom and I'm not able to break down their code to figure how to isolate the above behaviour.

I've seen this answer which I think addresses the question and have come up with this code:

cameraPosition = camera.position
cameraRotation = new THREE.Vector3(camera.rotation._x, camera.rotation._y, camera.rotation._z)
newCamera = new THREE.Vector3().addVectors(cameraPosition, cameraRotation)
camera.position.set(newCamera.x, newCamera.y, newCamera.z)
camera.updateProjectionMatrix()

But this seems to move the camera in a circle rather than backwards and forwards.

Any help would be much appreciated. Thank you!

4
  • to move camera backwards or forwards you just need to change z component of the camera position, adding to it some delta vector.
    – ampawd
    Jun 30, 2016 at 11:03
  • 1
    Again, read the link I posted. Jul 12, 2016 at 12:41
  • @WestLangley You're right. Sorry I didn't check that earlier. I assumed that camera.translateZ( x ) would be the same as camera.position.z += x;. But I was wrong. Thank you! Jul 12, 2016 at 12:45

2 Answers 2

20

To move the camera forward or backward the direction it is facing, use

camera.translateZ( - distance );

or

camera.translateZ( distance );

three.js r.78

2
  • 4
    and not surprisingly camera.translateX and camera.translateY do camera relative translations sideways and up and down respectively.
    – Symbolic
    Jun 24, 2017 at 11:04
  • But this makes the camera also go downwards instead of only forward.
    – Displee
    Dec 23, 2022 at 10:41
8

Here's how you do it by updating the camera.position.z. Use the W=forward, S=backward

var camera, scene, renderer, geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    geometry = new THREE.CubeGeometry(200, 200, 200);
    material = new THREE.MeshNormalMaterial();

    mesh = new THREE.Mesh(geometry, material);
    scene.add(mesh);

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize(window.innerWidth, window.innerHeight);
    
    document.body.appendChild(renderer.domElement);
    document.body.addEventListener( 'keydown', onKeyDown, false );

}

function animate() {

    requestAnimationFrame(animate);
    render();

}

function render() {
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render(scene, camera);
}

function onKeyDown(){
switch( event.keyCode ) {
   case 83: // up
   camera.position.z += 50;
   break;
   case 87: // down
   camera.position.z -= 50;
   break;
}
   
}
<script src="https://ajax.googleapis.com/ajax/libs/threejs/r76/three.min.js"></script>

2
  • Thanks for the great reply. I guess I should have been more specific though... In my scene the camera has x, y, & z position's set and is pointing at the centre of the scene. I was hoping to move the camera along the trajectory it was facing. I've modified your code above to demonstrate: jsfiddle.net/a9rhtLnk - Now the camera moves over the cube, but I was trying to make it move into the cube Jul 12, 2016 at 10:09
  • camera.lookAt( mesh.position ); will look into the cube.
    – Stubbies
    Jul 12, 2016 at 18:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.