angular 9.1 和 babylon 4.1 加载 gltf 问题答案

【问题标题】：angular 9.1 and babylon 4.1 loading gltf issueangular 9.1 和 babylon 4.1 加载 gltf 问题
【发布时间】：2020-05-01 23:59:36
【问题描述】：

babylon.js 的第 1 天。我已经为 angular 9.1 和 babylon 4.1 入门套件克隆了 this 存储库。我能够运行该项目。

下一步是我想加载我已经为其安装了包 babylonjs-loaders 的 gltf 模型并使用了该库，但在模型 404 的路径上出现错误。

代码：

    import { WindowRefService } from './../services/window-ref.service';
import {ElementRef, Injectable, NgZone} from '@angular/core';
import {
  Engine,
  FreeCamera,
  Scene,
  Light,
  Mesh,
  Color3,
  Color4,
  Vector3,
  HemisphericLight,
  StandardMaterial,
  Texture,
  DynamicTexture
} from 'babylonjs';
import 'babylonjs-materials';
import 'babylonjs-loaders';

@Injectable({ providedIn: 'root' })
export class EngineService {
  private canvas: HTMLCanvasElement;
  private engine: BABYLON.Engine;
  private camera: BABYLON.FreeCamera;
  private scene: BABYLON.Scene;
  private light: BABYLON.Light;

  private sphere: Mesh;

  public constructor(
    private ngZone: NgZone,
    private windowRef: WindowRefService
  ) {}


  public animate(): void {
    // We have to run this outside angular zones,
    // because it could trigger heavy changeDetection cycles.
    this.ngZone.runOutsideAngular(() => {
      const rendererLoopCallback = () => {
        this.scene.render();
      };

      if (this.windowRef.document.readyState !== 'loading') {
        this.engine.runRenderLoop(rendererLoopCallback);
      } else {
        this.windowRef.window.addEventListener('DOMContentLoaded', () => {
          this.engine.runRenderLoop(rendererLoopCallback);
        });
      }

      this.windowRef.window.addEventListener('resize', () => {
        this.engine.resize();
      });
    });
  }



  public loadScene(canvas: ElementRef<HTMLCanvasElement>): void {
    // The first step is to get the reference of the canvas element from our HTML document
    this.canvas = canvas.nativeElement;

    // Then, load the Babylon 3D engine:
    this.engine = new BABYLON.Engine(this.canvas,  true);

    // create a basic BJS Scene object
    this.scene = new BABYLON.Scene(this.engine);
    this.scene.clearColor = new Color4(0, 0, 0, 0);

    // create a FreeCamera, and set its position to (x:5, y:10, z:-20 )
    this.camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(5, 10, -20), this.scene);

    // target the camera to scene origin
    this.camera.setTarget(BABYLON.Vector3.Zero());

    // attach the camera to the canvas
    this.camera.attachControl(this.canvas, false);

    // create a basic light, aiming 0,1,0 - meaning, to the sky
    this.light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);

    BABYLON.SceneLoader.Append("./", "bmw.gltf", this.scene, function (scene) {
    // do something with the scene

  });
  }
}

我搜索过类似的问题，但没有得出任何结论。我可能缺少一些基本的东西。我将 gltf 保存在与 ts 文件相同的目录中，并且路径正确。我已经测试了将 png 图像放在同一路径上，并且能够在 200 状态的 chrome 开发工具的网络选项卡中看到它。

请帮助大家。我猜我导入 babylonjs-loaders 的方式是这里的罪魁祸首。

错误截图：

【问题讨论】：

标签： angularjs babylonjs

【解决方案1】：

您的 bmw.gltf 文件应位于您的资产文件夹中。这意味着您必须从那里加载文件。

BABYLON.SceneLoader.Append("/assets", "bmw.gltf"

【讨论】：