如何使用react-babylonjs 添加一个模型

首先，确保已经安装了 `react-babylonjs` 和 `babylonjs` 依赖包。

接下来，在你的 React 组件中导入 `Scene`、`Model` 和 `Vector3` 组件：

import { Scene, Model, Vector3 } from "react-babylonjs";

然后，在你的组件中创建一个 `Scene` 组件，并在其中添加一个 `Model` 组件：

<Scene>
  <Model
    rootUrl="https://models.babylonjs.com/"
    sceneFilename="suzanne.glb"
    position={new Vector3(0, 0, 0)}
  />
</Scene>

在上面的代码中，我们使用了 `suzanne.glb` 模型，并将其放置在了场景的中心点。`rootUrl` 属性指定了模型文件所在的路径，可以根据实际情况进行修改。

最后，你需要确保你的组件能够正确地渲染，例如：

function App() {
  return (
    <div style={{ height: "100vh" }}>
      <Scene
        onSceneMount={(scene) => {
          scene.createDefaultCamera(true, true, true);
          scene.createDefaultEnvironment();
        }}
      >
        <Model
          rootUrl="https://models.babylonjs.com/"
          sceneFilename="suzanne.glb"
          position={new Vector3(0, 0, 0)}
        />
      </Scene>
    </div>
  );
}

在上面的代码中，我们使用了一个 `div` 元素来包裹 `Scene` 组件，并将其高度设置为 `100vh`，以使其占据整个屏幕空间。`onSceneMount` 回调函数用于在场景加载完成后创建默认相机和环境。

希望这能够帮助你添加一个模型到 `react-babylonjs` 中。