WebGL+Three.js学习博客（二）

我们需要三个组成来完成Three.js：
场景（scene）、相机（camera） 和 渲染器（renderer）

立方体网格模型和光照组成了一个虚拟的三维场景,相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。

一. 场景

场景是所有物体的容器，我们想要显示一个3d模型，就要先构建一个场景。构建函数如下：
THREE.Scene()
代码示例：

var scene = new THREE.Scene();  

二、相机

相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。

场景只有一种，但是相机却又很多种。和现实中一样，不同的相机确定了呈相的各个方面。

在Threejs中有多种相机，它们是：

针对不同应用的三维场景需要使用不同的投影方式，比如机械、工业设计领域常常采用正投影(平行投影), 大型游戏场景往往采用透视投影(中心投影)。为了完成三维场景不同的投影方式，three.js封装WebGL API和相关算法，提供了正投影相机OrthographicCamera和透视投影相机PerspectiveCamera。

构建函数：THREE.OrthographicCamera()

构建一个透视投影相机代码示例：

var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);// 透视相机

（详细会在后面博客内更新…）

三、渲染器

渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。

构造函数：THREE.WebGLRenderer()

代码示例：

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);

具体参数后续会进行说明

五、渲染

使用渲染器，结合相机和场景来得到结果画面。具体实现函数：
render( scene, camera, renderTarget, forceClear )

各个参数的意义是：
scene：前面定义的场景
camera：前面定义的相机
renderTarget：渲染的目标，默认是渲染到前面定义的render变量中
forceClear：每次绘制之前都将画布的内容给清除，即使自动清除标志autoClear为false，也会清除。

1. 渲染循环

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

（1） 离线渲染

是事先把图片一帧一帧渲染好，再将其拼接成动画，就是离线渲染。如果不事先处理好一帧一帧的图片，那么播放得会很卡。CPU和GPU根本没有能力在播放的时候渲染出高质量的图片。

（2）实时渲染

就是需要不停的对画面进行渲染，即使画面中什么也没有改变，也需要重新渲染。
代码示例：

function render() {
    cube.rotation.x += 0.1;
    cube.rotation.y += 0.1;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

其中函数requestAnimationFrame，=就形成游戏循环。