特性
react-native-filament 是一个强大的 React Native 3D 渲染引擎。它具有以下特性:
- 🧊 使用 filament 的原生 C++ 物理基础渲染
- 🏀 使用 bullet3 的原生 C++ 物理引擎
- 🏎️ 通过 Metal 和 OpenGL/Vulkan 实现 GPU 加速
- 📹 在独立线程上进行渲染
- 📦 易于使用的响应式声明式 API
- 📚 文档完善
- ✅ 支持新旧架构
安装
请参阅文档中的安装指南。
示例
import { FilamentScene, FilamentView, Model, Camera, DefaultLight } from 'react-native-filament'
function App() {
return (
<FilamentScene>
<FilamentView
style={{ width: 100, height: 100 }}
model={model}
>
{/* 使用默认相机和灯光进行渲染: */}
<Camera />
<DefaultLight >
{/* 向场景中添加模型(目前仅支持 glb 格式): */}
<Model source={require('./duck.glb')}>
</FilamentView>
</FilamentScene>
)
}
查看示例应用
与其他库的比较
expo-gl 是一个用于渲染 3D 内容的库,通常与 expo-three 一起使用。相比之下,react-native-filament 具有以下优势:
- 支持开箱即用的
glb
文件 - 在 iOS 上,react-native-filament 使用 Metal,而 expo-gl 使用的是已弃用的 OpenGL ES Apple 框架
expo-three
的渲染发生在 JS 线程上,而 react-native-filament 使用独立线程(filament 在不同线程池中处理渲染命令)- filament 经过实战检验,react-native-filament 已在拥有数百万用户的生产应用中使用,证明了其高度稳定性
贡献
我们欢迎对 react-native-filament 的贡献!🎉
克隆仓库后,请确保同时克隆了子模块:
git submodule update --init --recursive --depth 1
安装所有 node 模块(包括示例):
cd package
yarn
最后构建 filament 和 bullet3:
# 在 ./package 目录下
yarn build-bullet3
yarn build-filament:release # 或 yarn build-filament:debug
然后你可以构建 package/example/AppExamplePaper
或 package/example/AppExampleFabric
中的示例应用。
大规模采用
react-native-filament 按原样提供。
如果你需要帮助将 react-native-filament 集成到你的应用中,或有额外的错误修复或功能请求,请通过 margelo.io 联系我们。
社交媒体
- 🐦 在 Twitter 上关注我们获取更新
- 💬 加入 Margelo 社区 Discord讨论 react-native-filament
致谢
Slay
react-native-filament 是为 Slay(Pengu 的创作者)构建的,并主要由他们资助!🐧 没有他们,react-native-filament 就不会存在,所以感谢 Slay!❤️
Filament 和 Bullet3
react-native-filament 使用了 filament(Google 开发的出色库)和 bullet3(Bullet Physics 开发的出色物理库)。没有这些核心库和它们背后的天才,react-native-filament 就不会存在 - 所以感谢 Google 和 Bullet!❤️
版权
本项目的示例应用使用了几个免费资源:
- 图片来自 freepik
- 图片来自 Freepik
- 图片来自 Freepik
- Michelle 来自 mixamo
- "Buster Drone"(https://skfb.ly/TBnX)由 LaVADraGoN 创作,根据知识共享署名-非商业性使用许可证(http://creativecommons.org/licenses/by-nc/4.0/)授权使用。