入门:真正的乐趣从这里开始!
欢迎来到 Discoverthree.js!
本书是一个完整的介绍性教程系列,旨在让您快速掌握 three.js,同时为您提供更深入地探索 three.js 和计算机图形学所需的技术语言和概念。
像所有伟大的艺术家一样,我们将从一个空白开始<canvas>
,在接下来的章节中,我们将逐渐完善它,直到我们创建了一个小而强大的 three.js 应用程序,其中包含灯光、纹理、材质和相机控制。在本节的最后几章中,我们将向您展示如何加载像上面场景中的鸟一样的 3D 模型,甚至使用如何使用 three.js 动画系统。
我们将在本节中介绍许多新概念、理论和术语,的确有很多内容,但请不要担心。我们的目标是快速向您介绍一个全新的信息世界,然后我们将在后面的章节中详细的介绍这些。在这里,我们将介绍足够详细的概念,让您在不牺牲任何技术准确性的情况下开始思考和使用它们。一旦你熟悉了基础知识,本书后面的章节将填补缺失的细节。
如果您是从 Web 开发人员的背景来到 three.js,或者即使您在这里开始您的整个软件开发生涯,您会发现这一点尤其重要。使用 three.js 意味着在计算机图形和 Web 开发的交叉领域工作,无论您的背景是什么,您都可能至少会遇到一些新概念。在浏览器中显示 3D 图形将许多不同的领域联系在一起。我们需要使用 HTML、CSS、JavaScript、一点数学知识、大量计算机图形,当然还有 three.js API。值得庆幸的是,three.js 出色地完成了隐藏所有这些复杂性的工作,直到您需要它为止。为了保持简洁,JavaScript 和浏览器 API 的技术细节已降级到 附录 中所以我们可以在正文中专注于 three.js 和计算机图形。每当我们遇到新的 JavaScript 功能或浏览器功能时,我们都会将您引导至附录中的相关部分。
让我们直接开始吧。很快你就会使用听起来很疯狂的东西,比如四元数 quaternions、变换矩阵 transformation matrices和缓冲几何 buffer geometries,这些你可能从未见过。
Coming Up in this Section
- 1.1Three.js应用的结构
- 1.2你的第一个three.js场景:你好,立方体!
- 1.3介绍世界应用程序
- 1.4基于物理的渲染和照明
- 1.5变换和坐标系
- 1.6使我们的场景具有响应性(以及处理锯齿)
- 1.7动画循环
- 1.8纹理映射简介
- 1.9使用相机控制插件扩展three.js
- 1.10环境光:来自各个方向的光照
- 1.11组织你的场景
- 1.12内置几何体
- 1.13以glTF格式加载3D模型
- 1.14three.js动画系统