WEBGL最受欢迎的框架---Three.js 入门指南.pdf-资料库

sysmaster-7703463-4744300845376669824.pdf-第1页.png

第1页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第2页.png

第2页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第3页.png

第3页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第4页.png

第4页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第5页.png

第5页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第6页.png

第6页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第7页.png

第7页 / 共138页

sysmaster-7703463-4744300845376669824.pdf-第8页.png

第8页 / 共138页

Three.js 入门指南前言作者简介：张雯莉，上海交通大学软件学院数字艺术方向的在读研究生，擅长图形图像处理、网页前端设计。个人网站：http://zhangwenli.com，电子邮箱：OviliaZhang@gmail.com，Github： http://github.com/Ovilia。欢迎读者给本书提出宝贵意见，也欢迎交流网页前端设计的其他话题。献给所有将创造令人心动的应用的程序员在 Intel 公司实习阶段，我制作了一个基于 Web Audio 的库 jWebAudio，为了演示这个库的三维音效效果，我决定自学 Three.js。由于之前有计算机图形学等课程的基础，而且 Three.js 中的很多概念是十分容易理解的，最终我在三天内快速地完成了三维打砖块游戏 Arcalands。用 Three.js 创建三维图形应用的高效性让我有些吃惊。后来，我又在多个项目中使用了 Three.js，慢慢加深了对它的了解。回顾学习 Three.js 的过程，我发现虽然目前网上使用 Three.js 的实例很多，但真正系统介绍该库的教程很少，官方文档又不齐全。对于入门者而言，仅仅看着别人的例子和 API 有时候还不足以“入门”。而我自己是通过很多个项目的实践，才慢慢对 Three.js 有了比较全面的了解。因此，我希望通过这本书给想学习 Three.js 的读者提供一个比较系统的入门介绍。

本书特色本书是目前市场上唯一一本介绍 Three.js 技术的书，旨在通过系统化的介绍，让初学者能够着手使用 Three.js，在网页上创建炫酷的三维图形应用，并学会持续学习进阶知识方法。本书每个章节都通过具体的例子阐释相关知识点，所有代码都可以在 Github 上找到。本书读者我们常说，这是一个信息爆炸的时代。这就意味着，虽然信息的获取变得越来越廉价，但学习新技术的成本却在不断增加。就作者个人而言，每次在学习一个新技术之前都要斟酌再三，因为可学习的内容越来越多，学习的机会成本也就变大了。所以，在阅读本书前，请你回答以下问题，如果您有一个回答“是”，那么本书就是为您打造的：  我学过 JavaScript，想要快速开发一款三维网页游戏，但我没有什么网页游戏开发经验。  我想要使用 WebGL，但是我没学过 OpenGL，对图形渲染也没什么概念。  我听说过 Three.js，正好想要学学，苦于没有一个完整的教程。  我对 Three.js 比较熟悉，想要更全面地了解它，并学习一些高阶的知识。  我是来打酱油的，说不定会看到什么感兴趣的内容。如果您有一个回答“是”，那么本书现在并不太适合您，或许您可以稍后再来看看：  我完全不懂 JavaScript  我想要学习 OpenGL、WebGL 这些比较底层的图形接口  我赶着加班……哎，需求又改了！

本书结构本书针对 Three.js 的几个重要话题分章节介绍。  第 1 章介绍 Three.js 和 WebGL 的背景资料，并通过简单的例子帮助读者实现第一个 Three.js 应用。  第 2 章介绍照相机的设定。  第 3、4、5 章分别介绍几何形状、材质和网格，即如何在场景中添加物体。  第 6 章介绍如何实现动画效果。  第 7 章介绍如何导入外部模型。  第 8 章介绍添加光源和阴影效果。  第 9 章介绍高阶话题——着色器。对于了解如何使用 Three.js 创建简单应用的读者可以跳过第 1 章，否则建议首先阅读第 1 章。对于初学者，建议按本书顺序阅读；对于比较有经验的读者，可以选择感兴趣的话题直接阅读。寻求帮助 1. 代码在每一章，本书都会用具体的例子来说明，代码可以在 https://github.com/Ovilia/ThreeExample.js 找到。书中在介绍到相关代码时，也会给出链接。 2. 文档当你知道应该查什么关键字的时候，查阅文档是最高效的。

Three.js 的官方文档可以在 http://threejs.org/docs 找到，但是由于 Three.js 版本更新很快（在本书的写作过程中，就经历了版本从 58 到 61 的变化，目前本书代码使用的版本是 59），使用的时候一定要注意代码的版本和文档的版本是否一致。有些文档是过时的，和代码是不对应的，而且这份文档也不完整，这时最好参考源代码进一步了解。但即便如此，文档对于我们了解 Three.js 还是能有不少帮助。 3. Google 你碰到的问题很可能别人也碰到过，因此，在提问之前记得 Google！ 4. StackOverflow 如果你搜不到类似问题，那么在 StackOverflow 上提问吧！ 5. 阅读源码 Three.js 的源码可以在 https://github.com/mrdoob/three.js/tree/master/build 找到。当怀疑文档和代码不一致时，一个很有效的办法是查阅源码。当然，读源码也不是让你逐行阅读，搜索关键字即可。当这一切都不奏效时…… 前几天，听学长说起在微软面试时的一道题：当你遇到一个没人知道的问题时怎么办？面试官给出了一个不错的解答：问你周围的人，碰到这样的情况他怎么办。有时候，你得不到直接的答案，但可以间接地询问如何获取答案。我想，作为程序员，我们或多或少都会遇到似乎没人能解决的问题，你可能没有意识到，但当你“不去管它，睡一觉醒来突然来了灵感”时，其实这同样是种解决方法。我们会像八仙过海一样解决各种各样

看似不可能的问题，那么，下次你觉得山重水复疑无路时，记得问问你的朋友是如何寻求帮助的。致谢本书的顺利完成离不开很多人的帮助和关心，首先要感谢的就是我的导师肖双九博士。除了教会我对本书有直接影响的计算机图形学课程，肖老师还教会我很多受益终身的学术知识和人生哲学，而且在平时生活中也对我非常关心照顾。 Three.js 技术是我在 Intel 实习阶段学习的，因此不得不提 Intel 大学合作经理颜历女士一路以来对我的关心。她有些像我的精神导师，在我困惑迷茫的时候，给了我很多中肯的建议。即使在我离开 Intel 后，我们也保持着联系，她也一直给予我关心和肯定，让我对自己选择的未来更有信心。我还要特别感谢 5 位为本书作审核的同学，其中三位同学有丰富的 Three.js 开发经验，另外两名从初学者的角度为本书提出了建议。他们分别是：徐雪桥、单震宇、叶家彬；史鑫、王佳骏。其中，徐雪桥现就读于美国 Carnegie Mellon University，具有丰富的网页开发经验，擅长使用 JavaScript 制作动画以及数据可视化，曾参与包括 Three.js 在内的多项开源项目。其他几位是我在交大的同学，都是各自擅长领域内的牛人，非常感谢他们能够抽出很多时间参与本书的审核工作。在此，也要感谢图灵社区提供了这样一个平台，使得本书得以面世。非常感谢图灵编辑董苗苗老师对我的悉心指导，为本书的顺利发布提供了非常重要的帮助。此外，我最想感谢作为读者的你。这是我第一次写书，因此你对本书的支持将对我是一种莫大的鼓励！

最后，祝大家享受阅读本书的过程，创造出令人心动的应用！第 1 章概述本章将介绍 WebGL 与 Three.js 的背景知识，如何下载、使用 Three.js。阅读完本章后，你将学会使用 Three.js 实现一个最简单的功能。 1.1 WebGL 与 Three.js 本节介绍 WebGL 与 Three.js 的相关概念，并通过两者实现同样功能的代码表现 Three.js 的简洁性。 1.1.1 什么是 WebGL WebGL 是基于 OpenGL ES 2.0 的 Web 标准，可以通过 HTML5 Canvas 元素作为 DOM 接口访问。听起来挺像回事儿的，但是这是什么意思呢？

如果你了解 OpenGL，那么我解释起来就比较轻松了。WebGL 可以看做是将 OpenGL ES （OpenGL for Embedded Systems，OpenGL 嵌入式版本，针对手机、游戏机等设备相对较轻量级的版本）移植到了网页平台，像 Chrome、Firefox 这些现代浏览器都实现了 WebGL 标准，使用 JavaScript 就可以用你熟悉的、类似 OpenGL 的代码编写了。如果你不了解 OpenGL，那也没关系，因为正如 Three.js 不需要你了解 OpenGL 或 WebGL 一样，本书也不需要你预先知道这些知识。你可以把 WebGL 简单地认为是一种网络标准，定义了一些较底层的图形接口，至于究竟多底层，稍后我们和 Three.js 代码对比来看。本书不会过多涉及 WebGL 的相关知识，如果读者想学习的话，市场上有不少相关书籍可供参考。现在，我们知道了 WebGL 是一个底层的标准，在这些标准被定义之后，Chrome、Firefox 之类的浏览器实现了这些标准。然后，程序员就能通过 JavaScript 代码，在网页上实现三维图形的渲染了。如果这对你来说还是太抽象，别着急，稍后我们会用具体的例子来说明。 1.1.2 什么是 Three.js Three.js 是一个 3D JavaScript 库。如此简介的描述背后，是作者对其强大功能的自信。那么，Three.js 究竟能用来干什么呢？ Three.js 封装了底层的图形接口，使得程序员能够在无需掌握繁冗的图形学知识的情况下，也能用简单的代码实现三维场景的渲染。我们都知道，更高的封装程度往往意味着灵活性

的牺牲，但是 Three.js 在这方面做得很好。几乎不会有 WebGL 支持而 Three.js 实现不了的情况，而且就算真的遇到这种情况，你还是能同时使用 WebGL 去实现，而不会有冲突。当然，除了 WebGL 之外，Three.js 还提供了基于 Canvas、SVG 标签的渲染器，但由于通常 WebGL 能够实现更灵活的渲染效果，所以本书主要针对基于 WebGL 渲染器进行说明。应用实例使用 Three.js 可以实现很多酷炫的效果，比如这个 minecraft 风格的网页游戏工具库 voxel.js： [+]查看原图精美绝伦的游戏效果：

资料库

WEBGL最受欢迎的框架---Three.js 入门指南.pdf

相关推荐

开发技术

热门标签

最新资料