React Three 生态系统：构建 3D 体验

React Three Ecosystem

Source | HN Comments

文章介绍了使用 `React Three` 生态系统构建 3D 体验的工具和库。核心是 `@react-three/fiber`，并推荐了多个配套包，包括 `@react-three/drei`、`react-three/handle`、`koota`、`leva`、`react-three/offscreen`、`react-three/postprocessing`、`react-three/rapier`、`react-three/uikit`、`react-three/xr` 和 `zustand`。这些工具涵盖了从实用工具、交互控制、状态管理、GUI 面板、离屏渲染、后期处理、物理引擎、UI 组件到 VR/AR 支持等多个方面，旨在简化和增强 `react-three-fiber` 的开发。

React Three

利用 React Three 生态系统构建 3D 体验

GitHub Docs Twitter Discord

选择要包含在项目中的包

全选

react-three/drei 一个不断增长的实用工具和全功能、现成的 @react-three/fiber 抽象集合。 Docs GitHub

react-three/handle 一个用于 react-three-fiber 的跨平台 handle 系统。为您的 3D 对象创建交互式控件和 handle。 Docs GitHub

koota 一个基于 ECS 的状态管理库，专为实时应用、游戏和 XR 体验优化。 Docs GitHub

leva 一个用于 React 的 GUI 面板。轻松创建控件并调试您的 react-three-fiber 场景。 Docs GitHub

react-three/offscreen 用于 react-three-fiber 的 Offscreen 渲染。在 worker 线程中渲染您的场景以获得更好的性能。 Docs GitHub

react-three/postprocessing 使用 react-postprocessing 为 react-three-fiber 进行后期处理效果。 Docs GitHub

react-three/rapier 使用 rapier.js 为 react-three-fiber 提供的基于物理的 hooks。 Docs GitHub

react-three/uikit 用于 react-three-fiber 的 UI 组件。在 3D 空间中构建交互式界面。 Docs GitHub

react-three/xr 为 react-three-fiber 提供 VR/AR 支持。使用 React 构建跨平台 XR 应用程序。 Docs GitHub

zustand 一个小型、快速且可扩展的状态管理解决方案。非常适合 react-three-fiber 应用程序。 Docs GitHub

npm create @react-three DownloadCreate Rep