学习一波PerspectiveCamera，此道甚难【玩转Three.js】
前情提要
你要学Three.js，就不要只学几何体。
你要学旋转动画，学旋转缩放。
你要学材质对象，学共有、私有属性。
你要学点线面模型，学平移变换。
你要学光照原理，学阴影投影。
你要学层级模型，学树结构。
你要学弧线绘制，学贝塞尔曲线。
场景
PerspectiveCamera(透视相机)
three.js里有几种不同的相机，我看大部分代码中使用的是PerspectiveCamera，我也就随大流学习它。
PerspectiveCamera摄像机使用perspective projection（透视投影）来进行投影。这种投影模式被用来模拟人眼所看到的景象，也是3D场景的渲染中使用得最普遍的投影模式。
属性
我看完文档，脑袋上缓缓打出了三个问号。然后我就想着挨个实验总能知道每个的效果。
但是第一个属性就把我给拦住了，试不出效果。我灵机一动，把源码找出来翻了翻，慢慢把知识点捋清楚了。（机智如我👍🏻）
属性名 |
描述 |
默认值 |
aspect |
表示摄像机视锥体的长宽比，通常比率为画布的宽/画布的高。 |
1 |
far |
摄像机的远端面。 |
2000 |
filmGauge |
表示胶片尺寸。 这个参数不会影响摄像机的投影矩阵，除非.filmOffset被设置为了一个非零的值。 |
35（单位毫米） |
filmOffset |
水平偏离中心偏移量。 |
0（单位毫米） |
focus |
该属性用于立体视觉和景深效果的物体的距离。 如果同时设置了StereoCamera，这个属性会影响摄像机的投影矩阵。 |
10 |
fov |
摄像机视锥体垂直视野角度，从视图的底部到顶部，以角度来表示。 |
50 |
isPerspectiveCamera |
用于检查给定对象的类型是否为PerspectiveCamera。 该属性为只读属性。 |
true |
near |
摄像机的近端面。 其有效值范围是0到当前摄像机far plane（远端面）的值之间。 请注意，和OrthographicCamera不同，0对于PerspectiveCamera的近端面来说不是一个有效值。 |
0.1 |
view |
该属性表示窗台规格。 这个值使用.setViewOffset方法来进行设置，使用.clearViewOffset方法来进行清除。 |
null |
zoom |
获取或者设置摄像机的缩放倍数。 |
1 |
方法
方法名 |
描述 |
clearViewOffset |
该方法可以清除任何由.setViewOffset设置的偏移量。 |
getEffectiveFOV |
结合.zoom（缩放倍数），以角度返回当前垂直视野角度。 |
getFilmHeight |
该方法返回当前胶片上图像的高。 如果.aspect小于或等于1（肖像格式、纵向构图），则结果等于.filmGauge。 |
getFilmWidth |
该方法返回当前胶片上图像的宽。 如果.aspect大于或等于1（景观格式、横向构图），则结果等于.filmGauge。 |
getFocalLength |
该方法返回当前.fov（视野角度）相对于.filmGauge（胶片尺寸）的焦距。 |
setFocalLength |
该方法通过相对于当前.filmGauge的焦距，设置FOV。 |
setViewOffset |
该方法在较大的viewing frustum（视锥体）中设置偏移量，对于多窗口或者多显示器的设置是很有用的。 参数为： fullWidth — 多视图的全宽设置 fullHeight — 多视图的全高设置 x — 副摄像机的水平偏移 y — 副摄像机的垂直偏移 width — 副摄像机的宽度 height — 副摄像机的高度 |
updateProjectionMatrix |
更新摄像机投影矩阵。在任何参数被改变以后必须被调用。 |
toJSON |
将摄像机转换为 three.js JSON Object/Scene format（three.js JSON 物体/场景格式）。 参数： meta -- 包含有元数据的对象，例如对象后代中的纹理或图像。 |
未完待续
学习了PerspectiveCamera之后，感觉我还不得其法，许是没开窍，也许是要辅助其他知识点，容我再多学一点。
我喜欢创作，每一幅作品都是我将想象用一只叫做“代码”的画笔，绘制而成。
当我寻找新的技术的时候，不是创意枯竭，而是我需要新的色彩。
作者：非职业「传道授业解惑」的开发者叶一一简介：「趣学前端」、「CSS畅想」系列作者，华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。
- 点赞
- 收藏
- 关注作者
评论（0）