three.js所：无法设置最大和最小缩放级别

Question

我使用这个例子对我的WebGL全景立方体： https://threejs.org/examples/?q=pano#webgl_panorama_equirectangular

我想限制内进行放大和缩小，即设定最高和最低缩放级别，但并不是无限的，因为代码默认提供。对于无限放大，如果滚动太多，后来反转的观点，从例如上面的函数如下：

function onDocumentMouseWheel(event) { 
      camera.fov += event.deltaY * 0.05; 
      camera.updateProjectionMatrix(); 
    } 

为了解决我尝试更新FOV的问题，当我的允许范围之内：

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(); 
     }; 
    } 

请注意我的FOV是90：

camera = new THREE.PerspectiveCamera(90, window.innerWidth/window.innerHeight), 0.1, 100); 

这似乎放大的水平已经非常完美了最大 - 它停止时，FOV是5和进一步不会放大。然而，当我缩小到FOV 95时，它将停止，但如果我继续用鼠标缩小，我将再次无限缩放，即使FOV仍然为95.

如何停止/控制无限缩小？

Answer 1

您的代码在下面的最小示例中按预期工作。 （我确实在做一个小的变化我使用>=/<=而不是>/<）

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(); 
 
    }) 
 
    }) 
 
})();

别的东西正在改变相机的数据。你确定你没有更新camera.zoom任何地方？

对于它的价值，唯一的（核心）three.js所修改该FOV方法是基于新的信息

啊PerspectiveCamera.setFocalLength

编辑，还有你的问题。我不知道你在使用外接鼠标控制器。 OrbitControls不调整FOV以创建其缩放效果。相反，它会将摄像机移近控制台的target。您的放大可能（偶然）与距离达到0相对应。但是因为它可以缩小到无穷远，所以它会继续缩小。

禁用像您的评论中的缩放应该可以解决问题。

three.js r87