Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to perform zoom with a Orthographic projection?

I just try to use the THREE.OrbitControls to perform zooming in orthographic projection, but i dont get the behave that i want.

I think that is possible change the viewSize that multiply to left, right, top and bottom to create a something near of a zoom

Anyone hava a better idea?

like image 775
Filipe Avatar asked Dec 01 '13 16:12

Filipe


3 Answers

Yes, you can implement a zooming effect with an OrthographicCamera by using the following pattern:

camera.zoom = 1.5;
camera.updateProjectionMatrix();

This works for PerspectiveCamera, too.

three.js r.70

like image 73
WestLangley Avatar answered Oct 07 '22 20:10

WestLangley


I have a function to zoom the scene. Please try it.

function zoom_all(center,size) {

    // get the current lookAt vector of OrthographicCamera camera

    var vectorLookAt = new THREE.Vector3(0, 0, -1);
    vectorLookAt.applyQuaternion(camera.quaternion);
    vectorLookAt.normalize();
    // move back along lookat vector to set new position of camera
    vectorLookAt.multiplyScalar(-size);
    camera.position = new THREE.Vector3().addVectors(center, vectorLookAt);
    // get current size of camera
    var viewSize = 2 * camera.top;
    var aspectRatio = 2 * camera.right / viewSize; // get aspectRatio of camera
    // camera = new THREE.OrthographicCamera(
    //        -aspectRatio * viewSize / 2, aspectRatio * viewSize / 2,
    //        viewSize / 2, -viewSize / 2,
    //        0.1, 1000);
    // update new size for camera
    viewSize = size;
    // now update camera size
    camera.left = -aspectRatio * viewSize / 2;
    camera.right = aspectRatio * viewSize / 2;
    camera.top = viewSize / 2;
    camera.bottom = -viewSize / 2;
    camera.near = 0.1;
    camera.far = 2 * size;
    camera.updateProjectionMatrix();
    // you can set light to camera position
    spotLight.position.set(camera.position.x, camera.position.y, camera.position.z);
    // set center point for orbit control
    orbitControls.center.set(center.x, center.y, center.z);
    orbitControls.target.set(center.x, center.y, center.z);

}
like image 35
NinhKu Avatar answered Oct 07 '22 20:10

NinhKu


If anyone is still interested, I edited OrbitControls to work with orthographic camera based on WestLangley's answer:

https://github.com/traversc/OrbitControls-orthographic_camera_fix/blob/master/OrbitControls.js

like image 34
thc Avatar answered Oct 07 '22 20:10

thc