Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

zooming camera in threeJS without trackball controls or other camera control library

I'm trying to use threeJS to control a camera in my scene. I currently have the camera set up to orbit in a circle around my object using the left and right keys on my keyboard. But does anyone know how I would zoom? Here's my current code:

camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000 );
camera.position.set(0,20,35);
var rotSpeed = .02;

function checkRotation(){

    var x = camera.position.x,
        y = camera.position.y,
        z = camera.position.z;

    if (keyboard.pressed("left")){ //MH - find a way to do this in a switch statement 
        camera.position.x = x * Math.cos(rotSpeed) + z * Math.sin(rotSpeed);
        camera.position.z = z * Math.cos(rotSpeed) - x * Math.sin(rotSpeed);
    } else if (keyboard.pressed("right")){
        camera.position.x = x * Math.cos(rotSpeed) - z * Math.sin(rotSpeed);
        camera.position.z = z * Math.cos(rotSpeed) + x * Math.sin(rotSpeed);
    } else if(keyboard.pressed("up")){
        //zoom in
    } else if (keyboard.pressed("down")){
        //zoom out
    }

    camera.lookAt(scene.position);

}
like image 423
mheavers Avatar asked Apr 27 '12 16:04

mheavers


2 Answers

If you want a real zoom, without moving the camera, then you can play with the field of view (fov) parameter of the camera:

  camera.fov *= zoomFactor;
  camera.updateProjectionMatrix();

See: http://jsfiddle.net/bvcCB/87/

If you want to move the camera near (or far) of the target, then calculate the vector from the camera position to the target, and move the camera position along that vector.

like image 197
Juan Mellado Avatar answered Oct 31 '22 22:10

Juan Mellado


From r69 you can now use camera.zoom:

camera.zoom = zoomFactor;
camera.updateProjectionMatrix();
like image 29
chrisarton Avatar answered Oct 31 '22 21:10

chrisarton