Chapter 1
第1章 使用Three.js创建你的第一个3D场景
近年来的现代浏览器支持一些强大的功能，开发者可以使用JavaScript来调用这些强大功能。例如，你可以轻松地使用HTML5标签添加视频和音频，使用HTML5 canvas创建交互式组件。现代浏览器还支持WebGL。你可以通过WebGL直接调用显卡来创建高性能的2D和3D计算机图形。不过使用JavaScript直接从WebGL创建和动画化3D场景是一个非常复杂、冗长且容易出错的过程。而Three.js库让这一切变得非常容易。以下是一些通过Three.js库非常容易实现的事情：
❑ 在任何浏览器中创建和渲染简单的或复杂的3D几何体。
❑ 在3D场景中移动和动画化对象。
❑ 对对象应用纹理和材质。
❑ 使用不同的光源照亮场景。
❑ 使用3D建模软件创建模型并将其导入Three.js应用程序中。
❑ 给3D场景添加高级的后期处理效果。
❑ 创建和使用自定义着色器。
❑ 创建、可视化和动画化点云。
❑ 创建虚拟现实和增强现实场景。
通过几行JavaScript代码（或者稍后在本书中学到的TypeScript），你就可以在浏览器中实时渲染任何东西，包括从简单的3D模型到逼真的场景。图1.1是一个使用Three.js实现的示例（你可以直接在浏览器中打开https://threejs.org/examples/webgl_animation_keyframes.html来查看其动画效果）。
图1.1 使用Three.js渲染和动画化的场景示例
本章我们将直接深入研究Three.js，并创建一些示例，以展示Three.js的工作原理，你可以通过尝试这些示例来了解Three.js的一些基本功能。我们不会在本章深入讨论所有的技术细节，而是在后续章节中详细介绍它们。在本章结束时，你将能够创建一个场景，并运行和探索本书中的所有示例。
我们将首先简要介绍Three.js，然后简单讲述几个示例和代码片段。在开始之前，我们快速了解一下目前浏览器对WebGL（和WebGPU）的支持程度。
提示
目前所有现代桌面浏览器以及移动浏览器均支持WebGL。然而，比较旧版本的IE浏览器（11版之前的版本）尚无法运行基于WebGL的应用程序。移动设备上的大多数浏览器都支持WebGL。因此，你可以使用WebGL创建在桌面和移动设备上运行得非常好的交互式3D可视化。
本书我们将重点关注Three.js提供的基于WebGL的渲染器。然而，Three.js不仅支持WebGL渲染器，还支持CSS 3D渲染器，你可以通过一个简单的API调用CSS 3D渲染器来创建基于CSS 3D的3D场景。使用基于CSS 3D的方法的主要优势是，所有移动和桌面浏览器都支持CSS 3D技术，另外CSS 3D可以直接在3D空间中渲染HTML元素（WebGL不支持）。具体技术细节我们不在此深入介绍，详见第7章的相关示例。
除了WebGL，还有一种在浏览器中使用GPU进行渲染的新标准——WebGPU，它的性能比WebGL更好，并且在未来可能会成为新的标准。不过因为Three.js的封装，所以当你使用Three.js时并不需要担心这个变化。Three.js已经开始支持WebGPU，尽管目前支持还不完善，随着WebGPU标准的发展和成熟，Three.js对WebGPU的支持也将不断改进和完善。因此，你使用Three.js创建的内容未来可以直接在WebGPU上运行，而无须任何修改。
我们将创建一个能够在桌面或移动设备上运行的3D场景。我们先介绍Three.js的核心概念，然后在后续章节中深入讲解更高级的内容。本章我们将创建两个不同的场景。第一个场景展示了使用Three.js渲染的基本几何体，如图1.2所示。
图1.2 Three.js默认渲染的几何体
然后我们将快速向你展示如何加载外部模型，以及如何轻松创建逼真的场景。第二个场景的结果如图1.3所示。
在开始这些示例之前，在接下来的几节，我们将介绍如何使用Three.js以及如何下载本书所展示的示例。
本章我们将涵盖以下主题：
❑ 使用Three.js的基本要求。
❑ 下载本书使用的源代码和示例。
❑ 测试和实验示例。
❑ 渲染和查看3D对象。
❑ 介绍一些用于统计和控制场景的辅助工具。
图1.3 加载外部模型并渲染