three.js入门系列之视角和辅助线

假设你已经创建好了three.js的开发环境（我是写在vue项目中的），那么接下来，从头开始演示是如何用three.js来构建3D图形的。（笔记本写的代码，屏幕小，所以为了能够整屏看到完整代码，就将字体缩小了，如果觉得看不清的，可以另行放大）

一、页面DOM结构

正如你所见，这就是一个vue的模板页面，一个简单的dom，我们的3D图形都是渲染在这个名为container的div中的，接下来，开始吧。

二、初始化三要素

场景、相机、渲染器，将绘好的场景渲染到渲染器中，将渲染器通过相机的视角传达给用户；

三、往场景中添加mesh模型以及其他

你应该看到上面中间有一个函数是添加mesh的，那我们具体来看看这个函数：

在这里，只向场景中添加了辅助线和一个立方体；

注意这个立方体的添加过程，第一句是声明立方体的形状（怎样的立方体），第二句是立方体的材质（材质决定最终看到的物体样子，可能会因为色差的原因，导致物体不见了）。

这里我的物体是法向量网孔材料（MeshNormalMaterial）的盒状立方体（BoxGeometry），立方体的位置也会决定我们看到的最终效果。

四、最终效果

五、camera以及辅助线

我用的是three.js的r99版本，所以API上的有些代码直接拿来用是会出现错误的。

这里用的是透视相机、除此之外还有立方体相机和正交相机，但是透视相机更符合人类看物体的视角，所以后面也会一直使用透视相机；

相机的x,y,z这就不用多说了，上面那个150其实和z效果差不多，都是用来决定相机的远近（间接决定所见物体的远近/大小），如有兴趣，可以自己调试各种值，r99版本中，x、y、z调试的时候，一次+1,突然加多了，你就发现物体不见了（TT）

上面的代码是立方体的一些参数，包括形状和材质，x、y、z轴偏移量；

尤其注意，r99版本中有很多值都是以1为上限，比如立方体的大小（长宽高），1就等于渲染器的大小，0.5表示渲染器大小的一半，物体的3轴偏移量也是以0.1为步长改变，所以老版本可能（是以像素为单位）动辄加减个几百的，到r99版本上，直接就看不到图形了，这点切记。