Use babylon.js with Angular 5

[Constantin]

Hey guys, i'm really new in all this stuff with WebGL and 3d stuff on web. I'm trying to create an Angular 5 component where i can load and run dynamically 3d models. But i'm little bit blocked. This is my component:

 

export class 3DComponent implements OnInit {
    private canvas: any;
    private engine: BABYLON.Engine;
    private camera: BABYLON.FreeCamera;
    private scene: BABYLON.Scene;
    private light: BABYLON.Light;

    constructor() { }

    ngOnInit() {
        this.canvas = document.getElementById('3dComponent');
        this.engine = new BABYLON.Engine(this.canvas, true);
        this.canvas.width = window.innerWidth * .9;
        this.canvas.height = window.innerHeight / 2;
        this.createScene();
        this.animate();
    }

    public createScene(): void {
        this.scene = new BABYLON.Scene(this.engine);
        this.light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), this.scene);
        this.camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 5, -10), this.scene);
        this.camera.setTarget(BABYLON.Vector3.Zero());
        this.canvas.style.backgroundColor = "white";
        this.scene.clearColor = new BABYLON.Color4(0, 0, 0, 0);
        this.camera.attachControl(this.canvas, false);

        BABYLON.SceneLoader.Append("assets/scenes/", "microphone.gltf", this.scene, (result) => {
            // do something
        })

        if (this.scene.isReady) {
            this.scene.updateTransformMatrix(true);
        }
    }

    public animate(): void {
        this.engine.runRenderLoop(() => {
            this.scene.render();
        });

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

But it doesn't work. It says: "Unable to load from assets/scenes/microphone.gltf: Failed to load scene."

The path looks like to be correct.

So, is the problem in my component?
How should i implement functionality for that to use best practices? 

Thanks a lot!

[sancelot]

Hi,

Can you try first to load an obj file ?

Regards,

 

[Guest]

Can you make sure to also reference the glTF loader?

https://github.com/BabylonJS/Babylon.js/blob/master/dist/loaders/babylonjs.loaders.min.js

[Constantin]

21 hours ago, sancelot said:

Hi,

Can you try first to load an obj file ?

Regards,

 

Hey, just tried, the same error: Unable to load from assets/scenes/bg3.obj: Failed to load scene.

[Constantin]

19 hours ago, Deltakosh said:

Can you make sure to also reference the glTF loader?

https://github.com/BabylonJS/Babylon.js/blob/master/dist/loaders/babylonjs.loaders.min.js

I imported it in my component: 

import 'babylonjs-loaders';

is not that enough?

[Constantin]

Also got these warnings:

• Module not found: Error: Can't resolve 'oimo'
• Module not found: Error: Can't resolve 'cannon'
• Module not found: Error: Can't resolve 'earcut'

But i guess problem comes not from these warnings  

[Guest]

can you debug with F12 network profiler to see if the file is loaded correctly then?

[Constantin]

13 minutes ago, Deltakosh said:

can you debug with F12 network profiler to see if the file is loaded correctly then?

I've tried to add some simple images and just open them in new tab to be sure that source to files it's correct. I was able to open images in new tab.

[Guest]

Can you publish the app somewhere with a reference to babylon.max.js to see it live?