Three.js中一些概念

公告：“业余草”微信公众号提供免费CSDN下载服务(只下Java资源)，关注业余草微信公众号，添加作者微信：xttblog2，发送下载链接帮助你免费下载！
本博客日IP超过2000，PV 3000 左右，急需赞助商。
极客时间所有课程通过我的二维码购买后返现24元微信红包，请加博主新的微信号：xttblog2，之前的微信号好友位已满，备注：返现
受密码保护的文章请关注“业余草”公众号，回复关键字“0”获得密码
所有面试题(java、前端、数据库、springboot等)一网打尽，请关注文末小程序

腾讯云】1核2G5M轻量应用服务器50元首年，高性价比，助您轻松上云

要在屏幕上展示3D图形，思路大体上都是这样的：

• 构建一个三维空间 
• Three中称之为场景(Scene)选择一个观察点，并确定观察方向/角度等 
• Three中称之为相机(Camera)在场景中添加供观察的物体 
• Three中的物体有很多种，包括Mesh,Line,Points等，它们都继承自Object3D类将观察到的场景渲染到屏幕上的指定区域 
• Three中使用Renderer完成这一工作

下面来具体看一看Three中的这些概念。

• Scene：场景是所有物体的容器，也对应着我们创建的三维世界。
• Camera坐标系：Camera是三维世界中的观察者，为了观察这个世界，首先我们要描述空间中的位置。 Three中使用采用常见的右手坐标系定位。
• 三维投影：Three中的相机有两种，分别是正投影相机THREE.OrthographicCamera和透视投影相机THREE.PerspectiveCamera。正交投影与透视投影的区别如上图所示，左图是正交投影，物体发出的光平行地投射到屏幕上，远近的方块都是一样大的；右图是透视投影，近大远小，符合我们平时看东西的感觉。 
• 视景体：视景体是一个几何体，只有视景体内的物体才会被我们看到，视景体之外的物体将被裁剪掉。这是为了去除不必要的运算。 
• 正交投影相机：正交投影相机的视景体是一个长方体，OrthographicCamera的构造函数是这样的：OrthographicCamera( left, right, top, bottom, near, far ) Camera本身可以看作是一个点，left则表示左平面在左右方向上与Camera的距离。另外几个参数同理。于是六个参数分别定义了视景体六个面的位置。可以近似地认为，视景体里的物体平行投影到近平面上，然后近平面上的图像被渲染到屏幕上。
• 透视投影相机：透视投影相机的视景体是个四棱台，它的构造函数是这样的：PerspectiveCamera( fov, aspect, near, far ) fov对应着图中的视角，是上下两面的夹角。aspect是近平面的宽高比。在加上近平面距离near，远平面距离far，就可以唯一确定这个视景体了。 透视投影相机很符合我们通常的看东西的感觉，因此大多数情况下我们都是用透视投影相机展示3D效果。
• Objects：有了相机，总要看点什么吧？在场景中添加一些物体吧。 Three中供显示的物体有很多，它们都继承自Object3D类，这里我们主要看一下Mesh和Points两种。
• Mesh：我们都知道，计算机的世界里，一条弧线是由有限个点构成的有限条线段连接得到的。线段很多时，看起来就是一条平滑的弧线了。计算机中的三维模型也是类似的，普遍的做法是用三角形组成的网格来描述，我们把这种模型称之为Mesh模型。在Three中，Mesh的构造函数是这样的：Mesh( geometry, material ) geometry是它的形状，material是它的材质。不止是Mesh，创建很多物体都要用到这两个属性。
• Geometry，形状，相当直观。Geometry通过存储模型用到的点集和点间关系(哪些点构成一个三角形)来达到描述物体形状的目的。Three提供了立方体(其实是长方体)、平面(其实是长方形)、球体、圆形、圆柱、圆台等许多基本形状；你也可以通过自己定义每个点的位置来构造形状；对于比较复杂的形状，我们还可以通过外部的模型文件导入。
• Material：材质，这就没有形状那么直观了。材质其实是物体表面除了形状以为所有可视属性的集合，例如色彩、纹理、光滑度、透明度、反射率、折射率、发光度。
• Points：Points其实就是一堆点的集合，它在之前很长时间都被称为ParticleSystem(粒子系统)，r68版本时更名为PointCloud,r72版本时才更名为Points。更名主要是因为，Mr.doob认为，粒子系统应当是包括粒子和相关的物理特性的处理的一套完整体系，而Three中的Points简单得多。因此最终这个类被命名为Points。
• Light：光影效果是让画面丰富的重要因素。Three提供了包括环境光AmbientLight、点光源PointLight、 聚光灯SpotLight、方向光DirectionalLight、半球光HemisphereLight等多种光源。
• Renderer：在场景中建立了各种物体，也有了光，还有观察物体的相机，是时候把看到的东西渲染到屏幕上了。这就是Render做的事情了。Renderer绑定一个canvas对象，并可以设置大小，默认背景颜色等属性。调用Renderer的render函数，传入scene和camera，就可以把图像渲染到canvas中了。

最后，欢迎关注我的个人微信公众号：业余草（yyucao）！可加作者微信号：xttblog2。备注：“1”，添加博主微信拉你进微信群。备注错误不会同意好友申请。再次感谢您的关注！后续有精彩内容会第一时间发给您！原创文章投稿请发送至532009913@qq.com邮箱。商务合作也可添加作者微信进行联系！

本文原文出处：业余草： » Three.js中一些概念