如何在 RCA-typescipt+babylonjs 项目中加载 gltf 模型？答案

【问题标题】：How to load gltf models in RCA-typescipt+babylonjs project?如何在 RCA-typescipt+babylonjs 项目中加载 gltf 模型？
【发布时间】：2021-10-02 00:43:01
【问题描述】：

我正在尝试在 RCA-typescipt 项目中加载 .gltf 模型文件，但失败了。

我创建了一个名为 SceneComponent 的 .tsx 文件，其中包括引擎、场景和画布：

    /* eslint-disable */
    import { Engine, Scene } from "@babylonjs/core";
    import React, { useEffect, useRef } from "react";
    /* eslint-disable */

    export default (props:any) => {
      const reactCanvas = useRef(null);
      const { antialias, engineOptions, adaptToDeviceRatio, sceneOptions, onRender, onSceneReady, ...rest } = props;

      useEffect(() => {
        if (reactCanvas.current) {
          const engine = new Engine(reactCanvas.current, antialias, engineOptions, adaptToDeviceRatio);
          const scene = new Scene(engine, sceneOptions);
          if (scene.isReady()) {
            props.onSceneReady(scene);
          } else {
            scene.onReadyObservable.addOnce((scene) => props.onSceneReady(scene));
          }

          engine.runRenderLoop(() => {
            if (typeof onRender === "function") {
              onRender(scene);
            }
            scene.render();
          });

          const resize = () => {
            scene.getEngine().resize();
          };

          if (window) {
            window.addEventListener("resize", resize);
          }

          return () => {
            scene.getEngine().dispose();

            if (window) {
              window.removeEventListener("resize", resize);
            }
          };
        }
      }, [reactCanvas]);

      return <canvas ref={reactCanvas} {...rest} />;
    };

然后我在我的 App.tsx 文件中使用这个组件：

    /* eslint-disable */
    import React, { useEffect, useRef } from 'react';
    import './App.css';
    import { FreeCamera, Vector3, HemisphericLight, MeshBuilder, SceneLoader, Scene, Engine, AssetsManager } from '@babylonjs/core';
    import "@babylonjs/loaders/glTF";
    import { Nullable } from '@babylonjs/core/types';
    import SceneComponent from './components/SceneComponent';
    /* eslint-disable */

    import model from "./assets/model2/scene.gltf";

    const App: React.FC = () => {

      const onSceneReady = (scene: any) => {

        const canvas = scene.getEngine().getRenderingCanvas();
        const camera = new FreeCamera("camera1", new Vector3(0, 5, -10), scene);
        camera.setTarget(Vector3.Zero());
        camera.attachControl(canvas, true);
        const light = new HemisphericLight("light", new Vector3(0, 1, 0), scene);
        light.intensity = 0.7;

        // MeshBuilder.CreateBox("box", {}, scene);
        // console.log(scene)
        // SceneLoader.Append("./assets/model2/", "scene.gltf", scene, function (scene) {
        //   console.log(scene);
        // });
        SceneLoader.ImportMeshAsync(
          "",
          "./assets/model2/",
          "scene.gltf",
          scene,
        );
        console.log(scene)
      };

      const onRender = () => {

      };

      return (
        <div>
          <SceneComponent antialias onSceneReady={onSceneReady} onRender={onRender} id="my-canvas" />
        </div>
      );
    }

    export default App;

但是当我尝试在 App.tsx 中加载 gltf 模型时，无论是 SceneLoader.Append() 方法还是 SceneLoader.ImportMeshAsync() 方法都无法成功加载 gltf 模型，它什么也没显示： picture1

如果我只是用MeshBuilder.CreateBox("box", {}, scene);在场景中创建一个盒子，可以看到模型： piture2

那么如何才能成功加载 gltf 模型文件呢？任何建议将不胜感激！

【问题讨论】：

标签： reactjs typescript babylonjs

【解决方案1】：

这是一个老问题，但我看到它在主论坛上问了很多。您需要确保您的模型路径相对于您的 /public 文件夹（并且您的资产也在该文件夹中）。公用文件夹是正在运行的 CRA 上的 ./。

如果您不确定，请查看开发人员工具中的网络选项卡，您的模型可能作为 index.html 文件提供，并且在控制台中通常还会记录有关解析模型文件的错误。

【讨论】：