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是极好的选择。 [b]1.基础[/b] 我假定你的三维图形学知识过关，而且也在一定程度上掌握了JavaScript。如果不是这样，那先去学一点吧，否则直接看这篇教程，也许会感到困惑。 在我们的三维世界里，我们有以下这些东西。我会带你一步一步创建它们。 1.场景 2.渲染器 3.相机 4.物体（带有材质的） 当然，你也可以创造些其他的什么东西，我也希望你如此做。 [b]2.浏览器支持[/b] 简单地看一下浏览器的支持情况吧。Google家的Chrome浏览器支持Three.js，在我的实验里，无论是对渲染器的支持程度还是JavaScript解释器的运行速度，Chrome都是做得最好的：它支持Canvas、WebGL和SVG，而且运行得非常快。FireFox浏览器排在第二位，它的JavaScript引擎的速度比Chrome慢了半拍，但是对渲染器的支持也很棒，而且FireFox的速度，随着版本更新也越来越快。Opera浏览器正在逐渐增加对WebGL的支持，Mac上的Safari浏览器有一个开启WebGL的选项。总体上，这两个浏览器仅仅支持Canvas渲染。微软家的IE9现在只支持Canvas渲染，而且微软似乎并不乐意支持WebGL这个新特性，所以我们现在肯定不会用IE9来做实验。 [b]3.设置场景[/b] 假定你已经选择了一个支持所有渲染技术的浏览器，而且你准备通过Canvas或WebGL来渲染场景（这是更标准化的选择）。Canvas比WebGL有着更广泛地支持，但是WebGL可以直接在GPU上操作，这意味着你的CPU可以专注地处理非渲染类的工作，比如物理引擎或与用户交互等。 无论你选择何种渲染器，你都必须牢记在心的是：JavaScript代码需要优化。三维显示对浏览器来说不是一项轻松的工作（现在能够这样做就很伟大了），所以如果你的渲染太慢了，你需要知道你代码的瓶颈在何处，如果可能，改善它。 说了这么多，我想你已经下载好Three.js源代码，而且将它引入了你的html文档了。那么如何开始创建一个场景呢？就像这样：