在 React 时代应该掌握的 WebGL 库

在这篇文章中，我们简要介绍了在 Web 上实现 3D 表现时， 前端工程师应该使用哪些库。请详细阅读各个库的官方文档以获取更多信息

three.js

一个能够在网页上轻松处理 3D 内容的库 除了 Babylon.js 等库之外，我们公司主要使用 three.js。

事实是，React Three Fiber 与 three.js 的 React 渲染器的集成非常出色， 这是因为它在接下来的介绍中。

有了这个库，即使是不熟悉 3D 的前端工程师也能够顺利地学习并运用 3D 在 Web 上的表现（我去年也是这样入门的，现在已经在生产环境中使用了）

阅读fundamentals可以帮助您理解 three.js 的基本概念。

(https://github.com/mrdoob/three.js/)

three.js 示例

three.js 的优点之一是其丰富的文档和示例。

在示例页面上，当使用特定关键词进行搜索时，会出现简单的示例

而且这个示例的源代码也是公开的，真是太好了!

如果你想了解一些在网页上可以实现的案例，可以关注Twitter 账号， 因为那里会有各种各样的示例。

React Three Fiber

先前提到， three.js 渲染器是 React Three Fiber（r3f）。 由于 3D 场景是通过层次结构来表示的，因此与 React 的表达方式非常相配

此外，项目是第一个使用 Next.js、React 和 Three.js（React-Three-Fiber） 开发的 Web 3D Metaverse 项目，因此在这个库的周围不断涌现出各种实用工具。

ただ、React のノリで state 使いまくると富豪的レンダリング 然而，如果在 React 中过度使用 state，会导致富豪式渲染（频繁执行不必要的重新渲染）， 从而浪费机器资源，因此需要学习一些技巧（详细请参考[jotai](### jotai)）

(https://github.com/pmndrs/react-three-fiber)

drei

这是 r3f 的助手集。如果你使用 r3f，我认为你几乎会一起使用它们. 将 3D 模型文件加载器转换为 React Hook，以及用于获取文件 useGLTF、加载状态 useProgress 的辅助函数，以及支持各种形状的帮助程序等等。因此，如果要在 r3f 中实现某些功能， 首先可以查看 drei，以尽量避免重新发明轮子。

(https://github.com/pmndrs/drei)

jotai

为了避免富豪渲染的状态管理库 由于 state 可以全局访问，所以非常方便使用

特别是使用 r3f 时，状态的增加会给 GPU 带来相当大的负担，因此 r3f 与之非常兼容

我们在产品中也引入了这个功能，一方面是为了解决富豪渲染的问题， 另一方面是因为我们加入了与 r3f 相同的Poimandres, 作者 daishi 先生是日本人，不仅在英文官方文档中有所介绍， 还在 daishi 先生的Blog上写了很多内容，详细情况请阅读那里的内容

(https://github.com/pmndrs/jotai)

gltfjsx

在处理 3D 模型时，常用的格式是 glTF，它是用于将这些数据快速转换为 jsx 的工具. 虽然在产品中没有使用过，但是有时候会下载 glTF 模型用于验证，并快速显示和验证. (https://github.com/pmndrs/gltfjsx)

gltfpack

最后是最近发现的 glTF 文件优化工具 这是一个相当疯狂的工具，它不仅可以优化文件的下载大小， 还可以优化加载负载和渲染速度， 似乎可以将我们最近使用的服务的可接受多边形数量增加 10 倍. (https://github.com/zeux/meshoptimizer/tree/master/gltf)

总结

经过一段时间的开发，我积累了很多关于 three.js 产品的经验， 现在已经看到了下一步的发展方向。下一步， 我们将进一步提升性能，打造更高质量的基于 3D 模型的服务。

我也是从一开始对 3D 一无所知，不知道该用什么工具开始的， 希望这篇文章能让初学者更容易入门。