Three.js-相机

透视相机(PerspectiveCamera)

THREE.PerspectiveCamera

透视摄像机

官方文档

一句话总结：PerspectiveCamera 的构造函数的四个参数决定了你能看到多大范围的内容；PerspectiveCamera 的 position 决定了你看物体的角度。

const fov = 75;
const aspect = 2; // 相机默认值
const near = 0.1;
const far = 5;
const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

fov是视野范围(field of view)的缩写。上述代码中是指垂直方向为 75 度。 注意 three.js 中大多数的角用弧度表示，但是因为某些原因透视摄像机使用角度表示。

aspect指画布的宽高比。我们将在别的文章详细讨论，在默认情况下 画布是 300x150 像素，所以宽高比为 300/150 或者说 2。

near和far代表近平面和远平面，它们限制了摄像机面朝方向的可绘区域。 任何距离小于或超过这个范围的物体都将被裁剪掉(不绘制)。

正交相机(OrthographicCamera)

注意：正交相机一定要设置其 left、right、top、bottom 的比例和绘图区域一致，否则场景中的物体会被拉伸。

这样设置即可：

相机操作

控制缩放(zoom)

https://stackoverflow.com/questions/41198618/orbitcontrols-js-how-to-zoom-in-zoom-out

zoomer.addEventListener('input', function (e) {
  var zoomDistance = Number(zoomer.value),
    currDistance = camera.position.length(),
    factor = zoomDistance / currDistance;

  camera.position.x *= factor;
  camera.position.y *= factor;
  camera.position.z *= factor;
});

参考资料

相机操控-camera-controls，据说比 Three 默认的 OrbitControls 更好：

https://github.com/yomotsu/camera-controls