不用学 Babylon.js 那套命令式 API，也能做出 3D 和 XR 应用

Babylon.js 是功能完整的 3D 引擎，但它的 API 是命令式的：创建 Mesh、绑定材质、加入场景、监听状态变化、手动 dispose 释放资源——每一步都要显式处理。对熟悉 React 的前端开发者来说，这套心智模型切换起来有一定摩擦。 Reactylon 的做法是把 Babylon.js 接进 React 的组件体系。同一个旋转方块，用 Reactylon 写出来是这样的：

<Box position={[0, 1, 0]} rotation={[0, angle, 0]} />

angle 变化时，方块的旋转属性自动更新。组件从树中移除时，对应的 GPU 资源自动释放。和写普通 React 组件一样，不需要手动管理 3D 对象的生命周期。

主要能力

JSX 描述 3D 场景

Reactylon 把 Babylon.js 的各类对象——Mesh、灯光、相机、材质、GUI 控件——封装成 JSX 元素。组件嵌套关系直接映射到场景图的父子层级，状态变化驱动场景更新，跟写 UI 组件的逻辑一致。

<Scene>
  <ArcRotateCamera target={[0, 0, 0]} />
  <HemisphericLight direction={[0, 1, 0]} intensity={0.8} />
  <Sphere diameter={1} position={[0, 0, 0]}>
    <StandardMaterial diffuseColor={Color3.Red()} />
  </Sphere>
</Scene>

完整的 TypeScript 支持

框架通过内部代码生成工具，读取 Babylon.js 的类型定义后自动生成 125 个以上的 JSX 元素类型和对应的 props 接口。Babylon.js 官方 API 的属性、构造器选项、可读可写字段在 JSX 里都有类型覆盖，编辑器能自动补全，传错类型编译期就会报错。

资源自动回收

Mesh、材质、灯光等 Babylon.js 对象持有 GPU 资源，忘记调用 dispose() 是常见的内存泄漏来源。Reactylon 在组件卸载时自动递归释放对应资源，不需要手动处理。

跨平台部署

同一套组件代码可以部署到：

Web：通过标准 React DOM 渲染
移动端：通过 @babylonjs/react-native 接入 iOS 和 Android
XR：利用 Babylon.js 内置的 WebXR 支持，覆盖 VR、AR、MR 场景

WebGPU 支持

v3.5.0 开始支持 WebGPU 渲染后端，切换时只修改引擎初始化配置，组件代码不需要改动。

安装与使用

快速新建项目

Reactylon 提供了官方脚手架工具，一行命令初始化项目：

npx create-reactylon-app my-app

脚手架会创建一个预配置好 Babylon.js 引擎和物理支持的 React 19 项目，开箱可用。

在已有 React 项目中集成

如果是在现有项目里引入，先安装依赖：

npm install reactylon @babylonjs/core @babylonjs/gui react-reconciler

同时安装 Babel 插件（负责把 JSX 编译成 Babylon.js 的实际调用）：

npm install -D babel-plugin-reactylon

然后在 Babel 配置中添加这个插件即可。

基本写法示例

下面是一个最简单的场景，包含相机、灯光和一个可交互的球体：

import { Engine, Scene, ArcRotateCamera, HemisphericLight, Sphere } from 'reactylon';
 
function App() {
  return (
    <Engine>
      <Scene>
        <ArcRotateCamera alpha={Math.PI / 4} beta={Math.PI / 4} radius={5} />
        <HemisphericLight direction={[0, 1, 0]} />
        <Sphere
          diameter={1}
          onPick={() => console.log('点击了球体')}
        />
      </Scene>
    </Engine>
  );
}

查看示例

官网提供了 125 个以上的在线 Sandbox 示例，覆盖材质、动画、物理、XR、GUI 等常见场景，可以直接在浏览器里运行和修改代码：reactylon.com/docs

与直接使用 Babylon.js 的差异

直接使用 Babylon.js 的优势是对引擎完全控制：渲染循环、资源加载时机、Shader 细节可以精确干预。Reactylon 在这上面加了一层声明式抽象，带来的是开发效率和可维护性，代价是对底层的控制粒度有所降低。

对于需要精细控制渲染循环或手动管理 GPU 资源的场景，Reactylon 提供了 manual render loop 的逃生出口（v3.5.1），但需要脱离常规的声明式写法。

与同类框架 React Three Fiber（基于 Three.js）相比，Reactylon 的底层引擎是 Babylon.js，内置物理、XR 和 GUI 支持更完整；Three.js 生态成熟度和社区资源目前仍然更丰富。选择哪个框架，通常取决于对底层引擎的偏好，而不是框架层面的差异。

写在最后

Reactylon 适合两类人：一是熟悉 React、想进入 3D 或 XR 开发但不想从头学 Babylon.js 命令式 API 的前端开发者；二是已经在用 Babylon.js、想引入组件化开发方式来管理复杂场景的团队。

需要注意的是，框架目前处于活跃迭代阶段，近两年有多次 breaking change（v1 升到 React 19、v2 引入 tree shaking），用在长期维护的生产项目前需要评估升级成本。

GitHub：https://github.com/simonedevit/reactylon (opens in a new tab)

r3f-webgpu-starter