Three.js - 如何限制缩放以便对象不会因相机而破裂

Question

我正在创建 Three.js 应用程序。我已经加载了我的 STL 对象。我使用过“OrbitControls”。当我开始使用鼠标中间滚动按钮缩放对象时，它会在某个点中断。

我的相机和控制代码如下：

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 15 );
                //camera.position.set( 3, 0.15, 3 );
                // position and point the camera to the center of the scene
                camera.position.x = -3;
                camera.position.y = 4;
                camera.position.z = 5;
                camera.lookAt(new THREE.Vector3(0, 0, 0));

controls = new THREE.OrbitControls( camera,  renderer.domElement  );
                controls.damping = 0.2;
                //controls.minZoom = 0;
                //              controls.maxZoom = 1;
                //controls .noZoom = true;

                controls.addEventListener( 'change', render );

我尝试使用控件

minZoom

和

maxZoom

，但它不起作用。

任何人都可以告诉我应该如何限制缩放，以便超过某个点我的对象不会破裂？

Answer 1

如果您使用

PerspectiveCamera

和

OrbitControls

，您可以像这样限制相机距离：

controls = new THREE.OrbitControls( camera, renderer.domElement );
controls.minDistance = 10;
controls.maxDistance = 50;

查看源代码

OrbitControls.js

了解更多设置。

三.js r.74

Answer 2

对于ReactJs

> import { OrbitControls } from '@react-three/drei'
> 
> <OrbitControls minDistance={10} maxDistance={50} />