Zoom implementation of 3D field of view in Threejs

Threejs Basic Part learning know Perspective Camera New Three. Perspectivecamera (fov, aspect, near,far) .

the larger the FOV angle of view (shooting distance), the smaller the object in the Scene. the smaller the FOV angle of view (shooting distance), the larger the object in the Scene.

Perspective camera (near Big far small)  Perspectivecamera  

Perspective camera parameter settings var FOV = 45,//the greater the  field of view angle, the smaller the object in the Scene. near    = 1,//camera The closest distance to the viewport is    far = 1000,//the farthest distance the camera is from the viewing volume    aspect =  Window.innerwidth/window.innerheight;//aspect ratio var camera = new Three. Perspectivecamera (fov,aspect, near, far);

Change the value of the FOV and update the camera

Change the FOV value and update the Scene's rendering Camera.fov = Fov;camera.updateprojectionmatrix (); renderer.render (scene, camera); Updateinfo ();

The mouse up and down the pulley to zoom out the effect  code as follows

Monitor mouse scrolling event Canvas.addeventlistener (' mousewheel ', mousewheel, false);

Mouse wheel-the mouse up and down the pulley to achieve zoom reduction effect function MouseWheel (e) {            e.preventdefault ();            E.stoppropagation ();            If (e.wheeldelta) {  //judgment browser ie, Google pulley event                if (e.wheeldelta > 0) {///////////////////when the pulley is scrolled up,                    fov-= (near < FOV 1:0) 
   
                    if (e.wheeldelta < 0) {//when the pulley scrolls down,                    FoV + = (fov < far 1:0);                }            } else if (e.detail) {  //f Irefox Pulley Event                if (e.detail > 0) {//fov-= 1 when the pulley is scrolled upward                    ;                }                If (e.detail < 0) {//fov + = 1 when the pulley scrolls down                    ;                }            }            Change the FOV value and update the Scene's render            Camera.fov = fov;            Camera.updateprojectionmatrix ();            Renderer.render (scene, camera);            Updateinfo ();}
   

Achieve Full-effect code labeling specific cases for individual originality

<! DOCTYPE html>
Article scaling source http://blog.csdn.net/u_9_5/article/details/50542847
Zoom implementation of 3D field of view in Threejs