Day 1 on babylon.js. I have cloned this repository for angular 9.1 and babylon 4.1 starter kit. I am able to run the project.
Next step is that I wanted to load the gltf model for which I have installed the package babylonjs-loaders and used the library but getting error that path to model 404.
Code:
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
});
}
}
I have googled on similar question but did not reach to any conclusion. I might be missing something basic. I have kept the gltf on the same directory as ts file and path is proper. I have tested with putting png image on same path and able to see it in network tab of chrome dev tool with 200 status.
Please help guys. I am guessing the way i am importing babylonjs-loaders is the culprit here.
error screenshot:
