three.js中的三大组件

在three.js中，要渲染物体到网页中，我们需要3个组件：场景scene、相机camera 和渲染器renderer。有了这三样东西，才能将物体渲染到网页中去。

创建这三要素的代码如下 :

var scene = new THREE.Scene(); // 场景
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);//正投影相机 
var renderer = new THREE.WebGLRenderer(); // 渲染器 
renderer.setSize(window.innerWidth, window.innerHeight); // 设置渲染器渲染的范围
renderer.setClearColor('#000');//刷新画布的颜色
document.body.appendChild(renderer.domElement); //添加画布到body上

场景

在Threejs中场景就只有一种，用THREE.Scene来表示，要构件一个场景也很简单，只要new一个对象就可以了，代码如下:

var scene = new THREE.Scene();

场景是所有物体的容器，如果要显示一个苹果，就需要将苹果对象加入场景中。

相机
相机决定了场景中那个角度的景色会显示出来。相机就像人的眼睛一样，人站在不同位置，抬头或者低头都能够看到不同的景色。
在Threejs中有多种相机，这里介绍两种，它们是：
正投影相机和透视投影相机

正投影相机: 距离该相机越远的物体，被渲染的越小（和人的眼睛观看物体类似，近大远小）
它的创建方式是 ：

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

透视投影相机：所有物体被渲染出来的尺寸都一样（不管远近）
它的创建方式是 ：

var camera = new THREE.OrthographicCamera(-4,4,4,-4,-200,500);

该相机通常使用在二维游戏中，如下图 ：


相机具体的参数在后面会讲解到，这里只做简单的介绍。

渲染器
渲染器决定了渲染的结果应该画在页面的什么元素上面，并且以怎样的方式来绘制。这里我们定义了一个WebRenderer渲染器(渲染器也有多种，如：canvasRenderer、CSS3DRenderer)，代码如下 :

var renderer = new THREE.WebGLRenderer(); 
renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(‘#000’);
document.body.appendChild(renderer.domElement);

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

渲染
renderer.render(scene, camera); 只有调用了该函数，渲染器才会开始工作，我们才能看到场景中的物体。

场景，相机，渲染器之间的关系
three.js中的场景是一个物体的容器，开发者可以将需要的角色放入场景中，例如苹果，葡萄。同时，角色自身也管理着其在场景中的位置。
相机的作用就是面对场景，在场景中取一个合适的景，把它拍下来。
渲染器的作用就是将相机拍摄下来的图片，放到浏览器中去显示。他们三者的关系如下图：