🪐 在网页上做 3D 这件事,React Three Fiber 把它变成了写 React 组件。
GitHub 揽获 32099 stars,一千九百多个 fork,Vercel、Zillow、 Player Me 这些公司的站点都在用。
原生 Three.js 写起来是一长串命令式代码:new 一个场景、new 一个相机、new 一个网格,手动挂上去,手动管销毁。想加交互,得自己维护一堆引用;想让某个模型跟着 React 的状态变,还得额外写同步逻辑,稍不留神就漏了释放。
React Three Fiber 直接把 Three.js 映射成了 JSX,你写一个 mesh 标签,它在底下 new 一个 THREE.Mesh。场景变成组件,能拆能复用,状态跟着 React 走。而且这层映射是动态的,Three.js 出了新特性不用等这个库跟进,直接就能用。
渲染发生在 React 之外,所以它自称相对原生 Three.js 没有额外开销,场景越大反而越占便宜。周边还长出一整圈库:drei 放常用组件,postprocessing 管后期,rapier 和 cannon 管物理,xr 管 VR 和 AR,uikit 管界面。React Native 那边也能用。
装的时候版本要对上,
@react-three/fiber
@8 配 react
@18,
@react-three/fiber
@9 配 react
@19。
会写 React 就等于会做 3D,这个杠杆有点大。
GitHub: