Three.js入门（一）

摘自Three.js入门指南 张雯莉 (作者）

本书针对Three.js的几个重要话题分章节介绍，包括：Three.js和WebGL的背景资料、照相机的设定、在场景中添加物体、实现动画效果、导入外部模型、添加光源和阴影效果、着色器等。

1、WebGL

WebGL是基于OpenGL ES 2.0的Web标准，可以通过HTML5 Canvas元素作为DOM接口访问。WebGL可以看做是将OpenGL ES（OpenGL for Embedded Systems，OpenGL嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）移植到了网页平台，像Chrome、Firefox这些现代浏览器都实现了WebGL标准，使用JavaScript就可以用你熟悉的、类似OpenGL的代码编写了。

2、什么是Three.js

Three.js封装了底层的图形接口，能大大简化WebGL的开发，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。几乎不会有WebGL支持而Three.js实现不了的情况，而且就算真的遇到这种情况，你还是能同时使用WebGL去实现，而不会有冲突。当然，除了WebGL之外，Three.js还提供了基于Canvas、SVG标签的渲染器，但由于通常WebGL能够实现更灵活的渲染效果，所以本书主要针对基于WebGL渲染器进行说明。

3、Hello world！

一个典型的Three.js程序至少要包括渲染器（Renderer）、场景（Scene）、照相机（Camera），以及你在场景中创建的物体。

渲染器（Renderer）

WebGL的渲染是需要HTML5 Canvas元素的，你可以手动在HTML的部分中定义Canvas元素，或者让Three.js帮你生成。这两种选择一般没有多大差别。
渲染器将和Canvas元素进行绑定，如果之前在HTML中手动定义了id为mainCanvas的Canvas元素，那么Renderer可以这样写：

 var renderer = new THREE.WebGLRenderer({
    canvas: document.getElementById('mainCanvas')
});

而如果想要Three.js生成Canvas元素，在HTML中就不需要定义Canvas元素，在JavaScript代码中可以这样写

var renderer = new THREE.WebGLRenderer();
renderer.setSize(400, 300);
document.getElementsByTagName('body')[0].appendChild(renderer.domElement);

上面代码的第二行表