react-native-filament

特性

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！❤️

版权

本项目的示例应用使用了几个免费资源：

图片来自 <a href="https://www.freepik.com/free-ai-image/space-travel-collage-design_94964745.htm#fromView=search&page=1&position=1&uuid=cf66f9c3-2d56-4228-a3cf-de7c07d418fb">freepik</a>
图片来自 <a href="https://www.freepik.com/free-psd/3d-icon-product-management_44990845.htm#fromView=search&page=2&position=0&uuid=691aae54-efdf-451c-9112-0ff373e761e7">Freepik</a>
图片来自 <a href="https://www.freepik.com/free-psd/3d-collection-with-hands-holding-smartphone_13678985.htm#fromView=search&page=1&position=3&uuid=7761a685-d1b6-4202-8505-9a872775cbbb">Freepik</a>
Michelle 来自 mixamo
"Buster Drone"（https://skfb.ly/TBnX）由 LaVADraGoN 创作，根据知识共享署名-非商业性使用许可证（http://creativecommons.org/licenses/by-nc/4.0/）授权使用。