React Native 开发者福音：3D 渲染终于不用写 Native 代码了

你有没有遇到过这种情况：产品经理兴冲冲地跑过来说"我们的 App 要加个 3D 模型展示"，然后你心里一凉——要在 React Native 里做 3D？翻出来的方案不是性能拉胯，就是要写一堆 Native 代码，更头疼的是 iOS 上的 OpenGL ES 早就被苹果标记为 deprecated。

如果你也被这个问题困扰过，今天要介绍的 react-native-filament 可能是你一直在等的答案。它让你用熟悉的 React 组件方式，就能在移动端跑出原生级的 3D 渲染效果。

react-native-filament 是什么？

一句话概括：一个让 React Native 应用轻松实现高性能 3D 图形渲染的原生库。

它底层基于 Google 的 Filament 引擎——这是一个经过工业级验证的物理渲染引擎，Android Studio 的 3D 预览就是用它做的。react-native-filament 把这套强大的能力，用 React 组件的方式包装起来，让你不用碰 C++ 代码就能用上。

核心技术栈：

Google Filament（物理渲染引擎）
Metal（iOS）/ OpenGL/Vulkan（Android）
Bullet3 物理引擎（支持物理模拟）
React Native 原生模块

谁在维护？ Margelo 团队——他们专注于 React Native 生态的性能优化工具，这个库已经在数百万用户的 App 里跑着了。GitHub 上 1.3k stars，89 个版本迭代，可以说是相当成熟。

为什么值得用

真正的原生性能

不同于 expo-gl 这类方案，react-native-filament 直接调用的是设备的原生 GPU：iOS 上走的是 Metal，Android 上走的是 Vulkan 或 OpenGL。这意味着什么？你的 3D 渲染不会卡在 JavaScript 线程上，而是在独立的渲染线程里跑，帧率和原生 App 一个水平。

我之前用 expo-three 做过一个产品展示的 3D 场景，在 iPhone 12 上勉强能到 30fps，换成 react-native-filament 之后直接 60fps 稳定输出。而且 iOS 上用的还是已经被苹果标记为"未来会移除"的 OpenGL ES，迁移到 Metal 是早晚的事——用 react-native-filament 就不用操心这个。

体积控制得很好

加一个 3D 渲染库，包体积会增加多少？react-native-filament 的答案是：大约 4MB。这对于一个完整的物理渲染引擎来说，已经相当克制了。Margelo 团队做了很多优化，比如只打包必要的 Filament 模块，剔除了一些桌面端才用得到的功能。

如果你的 App 对包体积敏感（比如工具类 App），这个数字应该在可接受范围内。相比之下，一些三方 3D 库动不动就 10MB+，还不一定能跑得动复杂场景。

开发体验很 React

最打动我的是它的 API 设计。看这段代码：

import { FilamentScene, FilamentView, Model, Camera, DefaultLight }
  from 'react-native-filament'
 
function ProductViewer() {
  return (
    <FilamentScene>
      <FilamentView style={{ width: '100%', height: 400 }}>
        <Camera />
        <DefaultLight />
        <Model source={require('./sneaker.glb')} />
      </FilamentView>
    </FilamentScene>
  )
}

就是普通的 React 组件嵌套，<Camera> <Light> <Model> 这些概念和 Three.js 如出一辙。如果你写过 Web 3D，上手几乎零成本。不需要 useEffect 里初始化渲染器，不需要手动管理渲染循环，组件卸载了资源也会自动释放。

而且它原生支持 GLB 格式，设计师从 Blender 或 C4D 导出的模型可以直接扔进来用，不用像以前那样还要转成 JSON 或者其他中间格式。

物理引擎加持

很多 3D 库只管渲染，要做交互或者模拟物理效果得自己写。react-native-filament 内置了 Bullet3 物理引擎——这是游戏行业常用的开源方案，支持碰撞检测、刚体运动、关节约束这些常见需求。

比如你要做一个"摇一摇手机，模型会晃动"的效果，或者"点击屏幕，物体会掉落"的交互，直接用它的物理 API 就能实现，不用自己算加速度和碰撞了。

怎么用

安装

npm install react-native-filament
# 或者
yarn add react-native-filament
 
# iOS 需要额外执行
cd ios && pod install

最小可运行示例

假设你要在 App 里展示一个 3D 模型，完整代码大概是这样：

import React from 'react'
import { StyleSheet, View } from 'react-native'
import {
  FilamentScene,
  FilamentView,
  Model,
  Camera,
  DefaultLight
} from 'react-native-filament'
 
export default function App() {
  return (
    <View style={styles.container}>
      <FilamentScene>
        <FilamentView style={styles.viewer}>
          {/* 摄像机：控制视角 */}
          <Camera />
 
          {/* 默认光照：自动配置环境光和主光源 */}
          <DefaultLight />
 
          {/* 3D 模型：支持 .glb 格式 */}
          <Model source={require('./assets/model.glb')} />
        </FilamentView>
      </FilamentScene>
    </View>
  )
}
 
const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#000' },
  viewer: { width: '100%', height: 400 }
})

代码解释：

FilamentScene 是顶层容器，负责初始化渲染引擎
FilamentView 是实际渲染的画布，可以用 style 控制大小
Camera 和 DefaultLight 是场景必备元素，不加的话啥也看不到
Model 的 source 支持本地文件（require）或网络 URL

运行之后，你会看到一个可以手势旋转、缩放的 3D 模型，默认就支持触摸交互，不用额外写代码。

什么场景下最有用

电商类 App 的产品 3D 展示 用户可以 360 度查看商品细节，比平面图片更直观。比如卖鞋的 App，用户能转动看鞋底纹路；卖家具的 App，能看到沙发的真实材质反光效果。react-native-filament 的物理渲染能把这些细节表现得很到位。

工业设计或建筑类应用 需要在移动端展示 CAD 模型或建筑方案的场景。设计师在工地上拿着 iPad 给客户演示，或者销售拿手机给客户看产品结构，这种时候性能和模型加载速度都很关键，Filament 的移动端优化正好契合。

游戏或互动内容 轻量级的 3D 小游戏，或者需要物理模拟的互动内容。内置 Bullet3 物理引擎意味着你可以做碰撞、重力、弹性这些效果，不用从零写物理系统。

写在最后

如果你正在做 React Native 项目，又刚好需要加入 3D 渲染功能，react-native-filament 基本是目前最优解：性能够强（原生 GPU + 独立线程），体积够小（4MB），开发体验够好（声明式组件）。

它不是那种"能用但不好用"的妥协方案，而是真正达到了原生 App 的水准。Margelo 团队已经把它用在了几百万用户的商业项目里，稳定性也经过了验证。

如果你之前因为性能担忧放弃了在 React Native 里做 3D，现在可以再试试看了。

R3F 生态 14 个核心仓库推荐 React Three Fiber