使用 Three.js 实现 3D 网页图形

Three.js渲染并动画化的场景

所有现代桌面浏览器以及移动浏览器目前均支持WebGL。较旧版本的IE（IE 11之前）无法运行基于WebGL的应用程序。在移动设备上，大多数浏览器都支持WebGL。因此，借助WebGL，我们可以在桌面和移动设备上创建运行流畅的交互式3D可视化效果。

在本课程中，我们将重点使用Three.js提供的基于WebGL的渲染器。此外，Three.js还提供了一种基于CSS 3D的渲染器，它能够通过简单的API创建基于CSS 3D的3D场景。采用CSS 3D方法的一大优势是，该标准在所有移动和桌面浏览器中均受支持，并允许我们在3D空间中渲染HTML元素。我们不会深入探讨这种渲染方式的细节。

除了WebGL之外，一种新的利用GPU在浏览器中进行渲染的标准——WebGPU正在开发中。WebGPU将提供比WebGL更出色的性能，并有望在未来成为新的行业标准。当我们使用Three.js时，无需担心这一变化。Three.js目前已部分支持WebGPU，随着该标准的成熟，其支持也将持续增强。因此，我们使用Three.js创建的所有内容都将原生兼容WebGPU。