Three.js基础之镜头(相机)

最新推荐文章于 2025-06-10 15:37:48 发布

四月的你

最新推荐文章于 2025-06-10 15:37:48 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript three.js

本文链接：https://blog.csdn.net/weixin_55696461/article/details/120993229

本文介绍了Three.js中的五种相机类型，重点讲解了透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）的工作原理及区别。透视相机模拟人眼观察，呈现近大远小的效果，其参数如fov、aspect、near和far决定了视椎范围。正交相机则不论距离，渲染物体大小保持一致。在实际应用中，透视相机通常用于创建三维场景，正交相机适合绘制2D图形或场景的侧面视图。了解这些相机特性对于优化Three.js渲染效果至关重要。

Three.js 中一共有 5 种相机，都继承于(Three.camera)

ArrayCamera                   镜头列阵一组已预定义的镜头

CubeCamera 立方镜头 6个面的镜头(前，后，左，右，顶，底)

OrthographicCamera 正交镜头无论物体距离镜头远近最终渲染出的大小不变

PerspectiveCamera 透视镜头像人眼睛一样的镜头，远大近小，最常用的

StereoCamera 立体镜头             双透视镜头，常用于创建立体影像或视差屏障

所有镜头的辅助对象都是： Three.Camerahelper

镜头的知识：

透视镜头（PerspectiveCamera）所呈现出的效果，和我们用眼睛观察世界是一摸一样的
平截面：无论观察什么物体，都会在视野中形成 2 个截面，例如我们在一个立方体的正前方，此时近截面完全遮挡住远截面，此时我们观察到的立方体更像是一个平面
视锥：假设把我们的镜头当作一个点，由这个点依次与物体的近截面，远截面的顶点进行链接，就会形成一个椎体，而这个虚构出来的椎体，就是我们镜头与物体在空间上存在的视椎，如果我们眼睛不是与物体，而是与场景Three.Scene 的近截面，远截面形成的视锥，就是正常 three.js 场景中可见空间。场景的远近视锥是由镜头的以下几个参数最终计算出的：01:镜头的观察角度(fov)。 02: 镜头画面的宽高比(aspect)。 03: 镜头的可见距离(far)。04: 镜头的最远可见距离(near)。 05: 一个隐含因素：镜头本身的位置（camera.position）近截面和远截面决定了物体是否在镜头内可见，物体与镜头的距离决定物体在视觉上的大小。当我们初始化一个镜头的时候，构造函数需要传递的 4 个参数，就是上面的 4 个元素。透视镜头默认参数值：fov=50，aspect=1， near=0.1， far=2000
Three.js 官方文档中对 4 个参数的解释是：fov：摄像机视锥体垂直视野角度。aspect：摄像机视锥体长宽比（宽高比）。near：摄像机视锥体近端面。 far：摄像机视锥体远端面
我们通常镜头设置参数为 new Three.PersepectiveCamera(45, 2, 0.1, 1000)，近截面通常设置为 0.1，远截面通常设置为 1000，超出这个范围内的物体或物体局部则都将不可见
正交镜头与透视镜头的几点不同。渲染时，对应的设置不同，透视镜头渲染时，需要修改的是 camera.aspect = newAspect 。正交镜头渲染时，需要修改的是 camera.left = -new Aspect。 camera.right = new Aspect