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

Question

我正在尝试加载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模型文件呢？任何建议都将不胜感激！

Answer 1

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

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