three.js中正交与透视投影相机的实战应用指南

目录

• 前言
• 1 正交投影相机
• 2 投射投影相机
• 3 实例
• 总结

前言

一个场景之所以会呈现在我们眼前是因为我们具有眼睛，眼睛提供了视觉。换句话说，如果three.js场景中没有这双眼睛，就像电影没有摄像机一样，场景就无法呈现在我们面前？这双眼睛就是相机，可见相机是Three.js场景中不可或缺的一个组件。Three.js库提供了两种不同的相机：正交投影相机和透视投影相机，接下来分别讲解这两种相机以及结合实例的应用。

1 正交投影相机

我们先来看一张示意图：

由图可知正交透视相机总共有6个面，其具备的特点是：场景中远处的物体和近处的物体是一样大的，它并不像我们现实生活中看场景那样，远小近大，而是远近皆一样大；6个面分别为left（左面），right（右面），top（顶面），bottom（底面），near（近面），near（远面），右这六个面组成一个封闭的矩形空间，在这个空间内的一切物体都可见。在设置其参数的时候，下面的关系式一定要成立：

| left / right | = 1，| top / buttom | = 1

正交相机的代码实现为：

var camera = new THREE.OrthographicCamera（left， right， top， bottom， near， far）；

2 投射投影相机

投射投影相机才是现实世界中我们看到的场景的体现：远小近大，即我们所说的透视效果。先来看一张示意图：

如图中所示，透视投影相机一共有4个参数：fov(视场，一个角度值)， Horizonta Field of View（横向视场），Vertical

 Field of View（纵向视场），Near plane（近面）， Far plane（远面）；由这几个因素，构成一个六面体的封闭空间，在这个空间内的一切物体可见。在设置参数时，需满足：

横向视场 / 纵向视场 = 浏览器窗口的宽/浏览器窗口的高。

其代码实现为：

var camera = new THREE.PerspectiveCamera（fov， width / height， near， far）；

3 实例

这里实现两种相机的应用，里面添加了一个简单的交互条，实现的效果如下图：

本例代码如下：

总结

到此这篇关于three.js中正交与透视投影相机的文章就介绍到这了,更多相关three.js正交与透视投影相机内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！