用Threejs创建你的第一个三维场景.pdf

第1 章 Chapter 1 用 Three.js 创建你的第一个三维场景 如今浏览器的功能越来越强大，而且这些功能可以通过JavaScript 直接调用。你可以用 HTML5 标签轻松地添加视频和音频，而且可以在HTML5 画布上创建各种交互组件。现在 这个功能集合里又有了一个新成员，即支持WebGL 。通过WebGL ，你可以直接使用显卡的 计算资源，创建高性能的二维和三维计算机图形，然后在JavaScript 里直接使用WebGL 编 程，创建三维场景并生成动画，这个过程非常复杂，而且容易出错。Three.js 库可以简化这 个过程。Three.js 可以帮助我们的地方如下： T 创建简单的和复杂的三维图形 T 在三维场景中生成动画、移动物体 T 在物体上应用纹理和材质 T 从三维建模软件中加载图形 T 创建基于样条曲线的二维图形 只要几行代码，你就可以从简单的三维图形创建出逼真的、实时的场景来，如下图所示： 2　 　Three. js 开发指南 在第 1 章中我们会直接开始探究Three.js ，通过创建几个例子来展示Three.js 是如何工作 的。你可以自己亲手试验一下这几个例子。但我们并不会深入探究所有的技术细节，这些细 节我们将会在后面的章节中讲解。本章会探讨下面几方面的内容： T 使用Three.js 时要用到的工具 T 下载本书附带的源码和示例 T 创建你的第一个Three.js 场景 T 应用材质、光线和动画来改进你创建的场景 T 引入几个辅助库，用于统计和控制场景 我们首先会简单介绍一下Three.js ，然后立即开始讲解第一个示例及其代码。在开始之前 我们先来快速浏览一下现在市面上几个最负盛名的浏览器，以及它们对WebGL 的支持情况。 现在支持Three.js 的浏览器如下表： 浏　览　器 支持情况 Mozilla Firefox 　4.0 版以后开始支持 Google Chrome 　第9 版以后开始支持 　5.1 版开始支持，以及那些新安装在Mac OS X 的山狮版、狮子版和雪豹版操作系统上的 Safari 版本。确保在Safari 中打开了WebGL 选项。为此你可以找到Preferences | Advanced 菜单， 选中Show develop menu in menu bar。然后选中菜单项Develop | Enable WebGL 　12.00 版以后开始支持。要让Opera 支持WebGL ，你还需要打开opera:config 文件，设置 Opera WebGL ，并将Enable Hardware Acceleration 置为 1。然后重启浏览器 　Internet Explorer 是长期以来唯一一个不支持WebGL 的主流浏览器。从IE11 开始，微软 Internet Explorer 才开始支持WebGL Preface Any command-line input or outp