День 1 на Вавилоне. js. Я клонировал этот репозиторий для angular 9.1 и стартового набора Babylon 4.1. Я могу запустить проект.
Следующий шаг - я хотел загрузить модель gltf, для которой я установил пакет babylonjs-loaders и использовал библиотеку, но получил ошибку, указав путь к модели 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
});
}
}
Я гуглил по аналогичному вопросу, но не пришел ни к какому выводу. Я мог бы пропустить что-то основа c. Я сохранил gltf в том же каталоге, что и файл ts, и путь правильный. Я проверил, поместив изображение png по тому же пути и смог увидеть его на вкладке сети инструмента chrome dev со статусом 200.
Пожалуйста, помогите, ребята. Я предполагаю, что виноват способ, которым я импортирую вавилон js -загрузчики. Скриншот ошибки
:
