实例介绍three.js常用的构造器、属性和方法

Sublime Text

Chrome浏览器调试

声明变量，创建四要素“渲染器”、“相机”、“场景”和“几何体”（场景、相机和几何体坐标都在0,0,0上），才能够使用相机将场景渲染到网页上，详细代码如下图：

函数initRenderer用于新建渲染器（作用就是将相机拍摄下来的图片，渲染到网页上），设置渲染器的宽高，并把渲染器添加到网页上，详细代码如下图：　　Tips：　　1.建议使用构造器WebGLRenderer，因为使用基于画板和SVG的渲染器，十分耗CPU资源，且缺乏对材质和阴影功能支持；　　2.setClearColor方法清除画布的颜色，替换成设置的新颜色，旧版本只支持16位的颜色设置。

函数initCamera用于新建相机（作用就是面对场景，取一个合适的景拍摄下来），并设置相机的属性，详细代码如下图：　　Tips：　　1.为了使例子更符合实际情况使用远景相机（PerspectiveCamera），观看的景物远小近大；而使用正交相机（OrthographicCamera）观看的景物都一样大，常用于模拟城市等；　　2.远景相机四个参数分别为视角（fov）、宽高比（aspect）、近裁剪面（near）和远裁剪面（far）：　　视角越大物体越小；　　宽高比尽量跟网页的宽高比一样，不然会导致看到的物体不是我们想象中想要的；　　近裁剪面和远裁剪面不影响显示大小，但物体位置必须在这两个的中间，不然会看不见物体。　　3.position设置相机的位置、up设置那个坐标轴向上、looaAt相机焦点。

函数initScene用于新建场景（场景是一个容器，开发者可以将需要的物体放入其中），详细代码如下图：

函数initLight用于新建光源（为了使渲染效果更真实性，使用光源是必不可少的方法），设置光源的位置，并添加到场景，详细代码如下图：　　Tips：　　1.本文使用了平行光DirectionalLight（比如太阳光），所以未被照射到的地方会显示黑色；　　2.其它常用光源有环境光源AmbientLight（放出的光线被认为来自任何方向，所以所有物体明暗程度一样）、点光源PointLight（从空间一点向所有方向发射光线，类似蜡烛）、聚光源SpotLight（类似台灯、吊灯或手电筒）。

函数initObject用于新建物体（创建放置在场景的物体），设置了一个带有材质的正方形，并添加到场景，详细代码如下图：　　Tips：　　1.CubeGeometry创建立方体；　　2.兰伯特网孔材料MeshLambertMaterial，一种考虑光照的材质（部分材料是不受光源影响，比如MeshBasicMaterial等）。

函数animation利用渲染器把正方体渲染到网页并让正方体旋转起来，详细代码如下图：　　Tips：　　1.让物体动起来有两种方法，一种是改变相机的位置，一种是改变物体自身的位置，这里使用了第二种，设置绕每个轴的旋转弧度rotation改变；　　2.利用requestAnimationFrame每隔一个动画帧重新渲染一次，由于上面设置了旋转弧度改变，所以每次重新渲染物体的位置都会改变，从而实现动画效果（属于实时渲染）。