three.js 学习笔记 － 基础之起步

最近又重新学习了下three.js，还得从基础学起啊，今天起步学习，最基础的三大组件。

三大组件分别是：场景（scene）、相机（camera）和渲染器（renderer），也就是靠着这三个东东，我们才能将物体渲染到网页中去。

那么这三者是什么关系呢？

首先，场景是一个物体的容器，开发者可以将需要的物体放入场景中，相机的作用就是把放入场景的物体拍下来，渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。

接下来详细介绍一下三个组件：

一、场景

场景就只有一种，用THREE.Scene来表示，构建一个场景的代码如下：

var scene = new THREE.Scene();

场景是所有物体的容器，你需要把显示的内容，放入到场景里面，才有机会被相机拍到，从而渲染到web页面上。

二、相机

相机决定了场景中哪个角度的景色会显示出来，就像你在屋里摆了个摄像头，照着哪里，就显示哪里。

相机有两种：正投影相机和透视相机。

正投影相机（THREE.OrthographicCamera），对象和相机之间的距离不会影响渲染效果，无远近之分，如下图所示：

透视相机（THREE.PerspectiveCamera），距离相机越远的地方，被渲染的越小，就像人眼自然的看东西一样，近处的大，远处的小，如下图所示：

可以看的出来，透视相机最贴近真实世界。

三、渲染器

场景搭好了，相机也放好了，接下来就是渲染了，渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

代码示例如下，这里我们定义了一个WebRenderer渲染器：

var renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);

渲染器renderer的domElement元素，表示渲染器中的画布，所有的渲染都是画在domElement上的，所以这里的appendChild表示将这个domElement挂接在body下面，这样渲染的结果就能够在页面中显示了。

四、示例

三大组件是一个基础，如果要在这三大组件搭建的环境里面显示东西，还得把物体添加进来。

例如，添加一个立方体：

var geometry = new THREE.CubeGeometry(1,1,1); 

var material = new THREE.MeshBasicMaterial({color: 0x00ff00});

var cube = new THREE.Mesh(geometry, material); 

scene.add(cube);

其中，THREE.CubeGeometry是一个几何体，THREE.MeshBasicMaterial是一种材质，几何体和材质共同组成了Mesh，最后把Mesh添加入场景就可以了。

物体也添加进去了，下一步就是渲染了，渲染应该使用渲染器，结合相机和场景来得到结果画面。实现这个功能的函数是：

renderer.render(scene, camera);

渲染函数的原型如下：

render( scene, camera, renderTarget, forceClear )

各个参数的意义是：

scene：前面定义的场景

camera：前面定义的相机

renderTarget：渲染的目标，默认是渲染到前面定义的render变量中

forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

渲染有两种方式：实时渲染和离线渲染 。

实时渲染：就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染，这种渲染要求很高（CPU和GPU），如果画面质量很高，就容易卡顿。

离线渲染：是事先渲染好一帧一帧的图片，然后再把图片拼接起来，最终显示。

五、总结

三大组件是基础，接下来还有材质、灯光等等，学习的东西还有很多，一点一点学吧。