javascript - Three.js: Unable to Set Maximum and Minimum Zoom Level -

i using example webgl panorama cube: https://threejs.org/examples/?q=pano#webgl_panorama_equirectangular

i want zoom in , out within limits, i.e. set maximum , minimum zoom level, not infinitely code provides default. infinite zoom, later reverses view if scrolled much, function example above looks this:

    function ondocumentmousewheel( event ) {             camera.fov += event.deltay * 0.05;             camera.updateprojectionmatrix();     } 

to address issue tried update fov when inside allowed range:

    function ondocumentmousewheel( event ) {         var fovmax = 95;         var fovmin = 5;         var newfov = camera.fov + event.deltay * 0.05;         if (newfov > fovmin && newfov < fovmax) {             camera.fov = newfov;             camera.updateprojectionmatrix();         };     } 

please note fov 90:

camera = new three.perspectivecamera( 90, window.innerwidth / window.innerheight), 0.1, 100 ); 

this seems have worked maximum zoomed-in level - stops when fov 5 , not zoom in further. however, zoom out fov 95, stop, if continue zooming out mouse more, zoom infinitely again, though fov remains 95.

how stop/control infinite zoom out?

your code works expected in minimal example below. (i did make small change in i'm using >=/<= rather >/<.)

var renderer, scene, camera, controls, stats;    var width = window.innerwidth,    height = window.innerheight,    fov = 35,    near = 1,    far = 1000;    var fovmax = 95,    fovmin = 5,    fovtmp = 0;    function zoom(event) {    event.preventdefault();    fovtmp = camera.fov + (event.deltay * 0.05);    if (fovtmp >= fovmin && fovtmp <= fovmax) {      camera.fov = fovtmp;      camera.updateprojectionmatrix();    }  }    function init() {    document.body.style.backgroundcolor = "slategray";      renderer = new three.webglrenderer({      antialias: true,      alpha: true    });      document.body.appendchild(renderer.domelement);    document.body.style.overflow = "hidden";    document.body.style.margin = "0";    document.body.style.padding = "0";      scene = new three.scene();      camera = new three.perspectivecamera(fov, width / height, near, far);    camera.position.z = 50;    scene.add(camera);      var light = new three.pointlight(0xffffff, 1, infinity);    camera.add(light);      stats = new stats();    stats.domelement.style.position = 'absolute';    stats.domelement.style.top = '0';    document.body.appendchild(stats.domelement);      resize();    window.onresize = resize;      // populate example    var cubegeo = new three.boxbuffergeometry(1, 1, 1),      cubemat = new three.meshphongmaterial({        color: "red"      });    var mesh = new three.mesh(cubegeo, cubemat);    scene.add(mesh);      window.addeventlistener("wheel", zoom);      animate();  }    function resize() {    width = window.innerwidth;    height = window.innerheight;    if (renderer && camera) {      renderer.setsize(width, height);      camera.aspect = width / height;      camera.updateprojectionmatrix();    }  }    function render() {    renderer.render(scene, camera);  }    function animate() {    requestanimationframe(animate);    render();    stats.update();  }    function threeready() {    init();  }    (function() {    function addscript(url, callback) {      callback = callback || function() {};      var script = document.createelement("script");      script.addeventlistener("load", callback);      script.setattribute("src", url);      document.head.appendchild(script);    }      addscript("https://threejs.org/build/three.js", function() {      addscript("https://threejs.org/examples/js/libs/stats.min.js", function() {        threeready();      })    })  })();

something else changing camera's data. sure you're not updating camera.zoom anywhere?

for it's worth, other (core) three.js method modifies fov perspectivecamera.setfocallength

edit based on new information

ah, there's problem. didn't know using external mouse controller. orbitcontrols doesn't adjust fov create zoom effect. instead, literally moves camera nearer to/further control's target. zoom-in (by chance) corresponded reaching 0 distance. because can zoom out infinity, that's why continued zoom out.

disabling zoom in comment should resolve issue.

three.js r87