THREE.JS入门教程(1)THREE.JS使用前了解

2024-05-06 14:19:52

字体：大中小

来源：转载

供稿：网友

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代码需要优化。三维显示对浏览器来说不是一项轻松的工作（现在能够这样做就很伟大了），所以如果你的渲染太慢了，你需要知道你代码的瓶颈在何处，如果可能，改善它。

上一篇：使用jquery实现图文切换效果另加特效

下一篇：jquery多行滚动/向左或向上滚动/响应鼠标实现思路及代码