Three.js-如何限制3D场景中的摄像机视图？

Posted 2021-05-02

我将第一人称控件添加到了three.js场景中。我想限制摄像机视图，以便不显示场景的末端。我正在使用three.js库中的firstpersoncontrols.js，其中包括鼠标，W，A，S，D和箭头控件。如何使用控件限制摄像机视图？我已经试图限制控制距离。以下是我到目前为止关于相机和控件的内容：

camera = new THREE.PerspectiveCamera( 55, window.innerWidth / window.innerHeight, 1, 20000 );
            camera.position.set( 30, 30, 100 );
            //
            controls = new THREE.FirstPersonControls( camera );
                        controls.movementSpeed = 100;
                        controls.enabled=true;
                        controls.maxDistance=50;//no change
                        controls.minDistance=10
                        controls.enablezoom=false;

https://codepen.io/anon/pen/baNJGR

答案

如果您想调整相机应该看到的距离和宽度，那么您可以调整FOV，近距离和远距离参数（PerspectiveCamera（fov，aspect，near，far））。

例如，尝试使用这些值创建相机（在codepen示例中尝试），

camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 200 );

您可以更改FOV以确定摄像机模拟视图的宽度，并更改远参数以调整摄像机应该看到的距离。