Jump to content

Babylon + Angular2 beta-9 : integrate babylonjs in an angular component

zied sellami

Recommended Posts

I'm trying to make an Angular2-Beta9 component that contains a canvas for the Babylonjs call  but the console provide me an error :


Uncaught Error: WebGL not supported                                           angular2-polyfills.js:1250

Engine                           @ babylon.2.1.debug.js:5344

(anonymous function)    @ SceneLoader.js:980

Zone.run                        @ angular2-polyfills.js:1243

zoneBoundFn                 @ angular2-polyfills.js:1220

If i use the canvas outside Angular works well.
I'm not sure if there is a specefic method to integrate  BabylonsJs with Angular2-beta9.

Im ready to migrate to an other  Angular2 beta-x  if it provides a solution.

Link to comment
Share on other sites

  • 4 weeks later...

Hey Zied Sellami,
I've run into the same problem, using babylonjs 2.3!

Babylonjs requires a window hook like DOMLoaded (?).  These lifecycles have been rewritten in angular 2. By a Google dart library called zones.js.   What I have done tho is to use the angular 2 life cycles and to put on the zones stack i add, a set timeout.  This isn't beautiful but it gets it working.  I'll also link the full code to my github but please know this is my first time with both angular 2 and babylon.  Github Babylon component


ngAfterViewInit() {
  setTimeout(()=> {
    this.canvas = <HTMLCanvasElement>document.getElementById('renderCanvas');
    this.engine = new BABYLON.Engine(this.canvas, true);
    this.scene = this.createScene();
  }, 100);


On the note of angular 2 and babylonJS.

@Deltakosh,  How hard would it be to get an export of all the babylon classes so we can import using es6 destructuring and potentially angular 2 dependancy injection?  Here's an example of angular2-jwt implementation


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