三个 js perspective/trackerball 控制 maxDistance minDistance 在使用 OrthographicCamera 时不起作用

Question

我正在开发一个需要使用 OrthographicCamera 和透视或轨迹球控件的 3js 项目。当我使用 perspectiveCamera 时一切正常，我可以通过设置控件的 minDistance 和 maxDistance 属性来限制放大或缩小距离，但是，一旦我切换到 OrthographicCamera，这个功能就停止工作了。我也尝试通过更改相机位置 z 来手动操作鼠标滚轮事件，但结果是一样的，它适用于 perspectiveCamera 但不适用于 OrthographicCamera。

    <script type="module">
            const scene = new THREE.Scene();
            const width =200;
            const height = 200;
            const camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 );
            /* const camera = new THREE.PerspectiveCamera( 50, width / height, 1, 1000 ); */

            const renderer = new THREE.WebGLRenderer();
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );
            import { OrbitControls  } from 'https://cdn.skypack.dev/three@0.136.0/examples/jsm/controls/OrbitControls.js';
            const controls = new OrbitControls( camera, renderer.domElement );
            controls.minDistance = 70;
            controls.maxDistance= 100;

            const geometry = new THREE.BoxGeometry(30,30,30);
            const material = new THREE.MeshBasicMaterial( { color: "grey", } );
            const cube = new THREE.Mesh( geometry, material );
            scene.add( cube );

            camera.position.z = 70;

            function animate() {
                requestAnimationFrame( animate );
                renderer.render( scene, camera );
            }
            animate();
        </script>

Answer 1

如 THREE.OrbitControls 的 documentation page 中所述，属性 minDistance 和 maxDistance 仅适用于透视相机。这样做的原因是透视相机的缩放是通过推拉实现的（因此相机沿其观察方向平移）。

对于正交相机来说情况并非如此。在这种情况下 THREE.OrbitControls 通过修改相机的投影矩阵来实现缩放。您必须使用属性 minZoom 和 maxZoom.

来控制最小和最大缩放

三个 js perspective/trackerball 控制 maxDistance minDistance 在使用 OrthographicCamera 时不起作用

Three js perspective/trackerball controls maxDistance minDistance not working when using OrthographicCamera

three.js