Search code examples
angularbabylonjs

BabylonJS Canvas is Blank in Angular 6

I'm trying to run a BabyonJS scene in an Angular 6 app and the canvas is completely blank. BabylonJS loads with no errors and the canvas shows the BabylonJS loading animation; however, once loaded, the canvas is completely blank. In fact, the canvas is transparent.

I'm simply trying to run this BabylonJS demo code in Angular. I get the same result for other demos as well. I recreated this problem in a StackBlitz Angular app: https://stackblitz.com/edit/angular-brhjyz

Relevant Info:

The scene is created after the canvas loads using Angular's AfterViewInit. The canvas is referenced with ViewChild to avoid manipulating the DOM.

Solution

  • Sadly you moved to Three.js, but just to explain what didn't work:

    https://stackblitz.com/edit/angular-cnxqym

    You were missing the render loop:

        this.engine.runRenderLoop(() => {
        this.scene.render();
    });

    Adding that would have started rendering your scene.