ThreeJS入门（006）：Camera 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 006篇入门文章

在Three.js中，THREE.Camera 是所有相机类型的基类，并且它本身不能直接实例化。Three.js 提供了几种不同类型的相机来满足不同的渲染需求，主要包括 THREE.PerspectiveCamera 和 THREE.OrthographicCamera。

THREE.PerspectiveCamera (透视摄像机)

透视摄像机模拟人眼或传统摄影机的效果，远处的物体会显得更小。创建一个透视摄像机通常需要提供以下参数：

• fov (field of view): 视角，以垂直方向的角度来指定，通常是75度左右。
• aspect: 宽高比，通常设置为窗口宽度与高度的比例。
• near: 靠近剪裁平面的距离。
• far: 远处剪裁平面的距离。

示例代码：

var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
scene.add(camera);

THREE.OrthographicCamera (正射摄像机)

正射摄像机不会造成透视效果，即无论物体距离摄像机远近，其大小都保持不变。这通常用于2D游戏或者特定的3D应用中。创建一个正射摄像机需要指定以下参数：

• left: 左侧边界。
• right: 右侧边界。
• top: 上侧边界。
• bottom: 下侧边界。
• near: 靠近剪裁平面的距离。
• far: 远处剪裁平面的距离。

这些参数定义了一个二维的矩形区域，在这个区域内可见的对象会被渲染。

示例代码：

var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);
scene.add(camera);

相机的位置与目标

无论是透视摄像机还是正射摄像机，都可以通过设置它们的位置(position)来改变视角。此外，还可以设置一个目标点(lookAt)，使摄像机对准该点。

camera.position.z = 5; // 设置摄像机位置
camera.lookAt(new THREE.Vector3(0, 0, 0)); // 设置摄像机朝向

更新摄像机

当窗口尺寸变化时，对于透视摄像机来说，你需要更新它的宽高比 (aspect)；而对于正射摄像机，可能需要调整 left, right, top, bottom 参数来适应新的窗口尺寸。

总结

选择哪种类型的摄像机取决于你的应用场景。如果你希望模拟真实世界的视觉体验，透视摄像机会是一个不错的选择。而如果你的应用主要涉及2D图形或者不需要透视效果的情况，那么正射摄像机将更加合适。