Three.js是一个伟大的开源WebGL库，WebGL允许JavaScript操作GPU，在浏览器端实现真正意义的3D。但是目前这项技术还处在发展阶段，资料极为匮乏，爱好者学习基本要通过Demo源码和Three.js本身的源码来学习。
国外网站 aerotwist.com 有六篇较为简单的入门教程，我尝试着将其翻译过来，与大家分享。
我在一些实验项目中使用了Three.js，我发现它对快速上手浏览器3D编程确实很有帮助。通过Three.js，你不仅可以创建相机、物体、光线、材质等等，还可以选择着色器，可以决定使用何种技术（WebGL、Canvas或SVG）在网页上渲染你的3D图形。Three.js是开源的，你甚至可以参与到这个项目中来。但现在，我将把重点放在基础的介绍上，我将向你展示如何使用这个引擎上。
尽管Three.js如此奇妙，但有时候它也会令人抓狂。比如，你将花费大量时间阅读例程，做一些逆向工程（在我的情形下）来确定某个函数的作用，有时还要去GitHub上提问。如果你需要提问，Mr. doob和AlteredQualia是极好的选择。
1.基础
我假定你的三维图形学知识过关，而且也在一定程度上掌握了JavaScript。如果不是这样，那先去学一点吧，否则直接看这篇教程，也许会感到困惑。
在我们的三维世界里，我们有以下这些东西。我会带你一步一步创建它们。
1.场景
2.渲染器
3.相机
4.物体（带有材质的）
当然，你也可以创造些其他的什么东西，我也希望你如此做。
2.浏览器支持
简单地看一下浏览器的支持情况吧。Google家的Chrome浏览器支持Three.js，在我的实验里，无论是对渲染器的支持程度还是JavaScript解释器的运行速度，Chrome都是做得最好的：它支持Canvas、WebGL和SVG，而且运行得非常快。FireFox浏览器排在第二位，它的JavaScript引擎的速度比Chrome慢了半拍，但是对渲染器的支持也很棒，而且FireFox的速度，随着版本更新也越来越快。Opera浏览器正在逐渐增加对WebGL的支持，Mac上的Safari浏览器有一个开启WebGL的选项。总体上，这两个浏览器仅仅支持Canvas渲染。微软家的IE9现在只支持Canvas渲染，而且微软似乎并不乐意支持WebGL这个新特性，所以我们现在肯定不会用IE9来做实验。
3.设置场景
假定你已经选择了一个支持所有渲染技术的浏览器，而且你准备通过Canvas或WebGL来渲染场景（这是更标准化的选择）。Canvas比WebGL有着更广泛地支持，但是WebGL可以直接在GPU上操作，这意味着你的CPU可以专注地处理非渲染类的工作，比如物理引擎或与用户交互等。
无论你选择何种渲染器，你都必须牢记在心的是：JavaScript代码需要优化。三维显示对浏览器来说不是一项轻松的工作（现在能够这样做就很伟大了），所以如果你的渲染太慢了，你需要知道你代码的瓶颈在何处，如果可能，改善它。
说了这么多，我想你已经下载好Three.js源代码，而且将它引入了你的html文档了。那么如何开始创建一个场景呢？就像这样：
复制代码 代码如下:
// 设置场景大小
var WIDTH = 400,
HEIGHT = 300;
// 设置一些相机参数
var VIEW_ANGLE = 45,
ASPECT = WIDTH / HEIGHT,
NEAR = 0.1,
FAR = 10000;
// 获取DOM结构中的元素
// - 假设我们使用了JQuery
var $container = $('#container');
// 创建渲染器、相机和场景
var renderer = new THREE.WebGLRenderer();
var camera =
new THREE.PerspectiveCamera(
VIEW_ANGLE,
ASPECT,
NEAR,
FAR);
var scene = new THREE.Scene();
// 将相机加入场景
scene.add(camera);
// 相机的初始位置为原点
// 将相机拉回来一些（译者注：这样才能看到原点）
camera.position.z = 300;
// 启动渲染器
renderer.setSize(WIDTH, HEIGHT);
// 将渲染器加到DOM结构中
$container.append(renderer.domElement);
你看，简单吧！
4.构建网格表面
现在我们有了一个场景，一个相机和一个渲染器（在我的例子里，当然是一个WebGL渲染器），但我们事实上什么还没画呢。事实上，Three.js提供了载入某几种标准格式3D文件的支持，如果你在Blender，Maya，Cinema4D或是什么其他工具中建模，这简直太棒了。为了简单（毕竟这才刚开始呢！）我们先来考虑基元。基元就是基本的几何表面，比如最基本的球体、平面、立方体、圆柱体。利用Three.js可以很方便地创建这些基元：
复制代码 代码如下:
// 设置球体参数（译者注：球体被划分为16×16的网格，如果后两个参数取4、2，则生成一个八面体，请想象）
var radius = 50,
segments = 16,
rings = 16;
// material覆盖在geometry上，生成mesh
var sphere = new THREE.Mesh(
new THREE.SphereGeometry(
radius,
segments,
rings),
sphereMaterial);
// 将mesh加入到场景中
scene.add(sphere);
好了，但是球体上的材质呢？在代码中我们使用了一个sphereMaterial变量，我们还没定义它呢。那我们就先来看看怎么创建材质吧。
5.材质
毫无疑问，这是Three.js最有用的部分了。这部分提供了几个非常易用的通用材质模型：
1.Basic材质：表示一种不考虑光照的材质，现在只能这么说了。
2.Lambert材质：（译者注：朗伯面，各向同性反射）。
3.Phong材质：（译者注：冯氏面，有光泽的表面，介于镜面反射和朗伯反射之间的反射，描述真实世界的反射）。
除此之外，还有一些其他类型材质，简单起见，就留给你自己探索。事实上，在使用WebGL类型的渲染器时，材质实在太好用了。为什么呢？因为在原生WebGL种你必须亲自为每个渲染编写着色器，而着色器本身就是个巨大的工程：简单地说着色器是使用GLSL语言（OpenGL的着色器语言）写的，用来操作GPU的程序，这意味着你要在数学上模拟光照，反射等等，这很快就变成一项极为复杂的工作。多亏有了Three.js你才可以不必去自己编写着色器，当然，如果你想亲自编写的话，你可以使用MeshShaderMaterial，可见这是很灵活的设定。
现在，让我们用朗伯面材质覆盖球体：
复制代码 代码如下: