Jump to content

Use babylon.js with Angular 5


Recommended Posts

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;

    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.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) {

    public animate(): void {
        this.engine.runRenderLoop(() => {

        window.addEventListener('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!

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...