BabylonJs with Angular 6

[ghostman]

Hello,

I am new to BabylonJs, I am working on the project that contains a virtual hall. I want to integrate that hall into Angular 6 application. Can someone please help me with how to add BabylonJs with all the dependencies.

[Sebavan]

Ping @brianzinn who can definitely help with the setup.

Also, you can have a look at this doc explaining some of the configuration for angular: http://doc.babylonjs.com/resources/babylonjs_and_ionic_angular

[brianzinn]

I haven't use Angular since V1, so I think we can all agree that I can't help much there!

I think the general idea is to use NPM and load scene in ngAfterContentInit().  All the relevant docs are here for NPM.  Note that import 'babylonjs-loaders' is only for side effects:
https://doc.babylonjs.com/features/npm_support

[ghostman]

Thanks, @Sebavan and @brianzinn for the fast reply, I appreciate that.

- Can you please tell me its possible to integrate Babylon in the Angular application and how much it is efficient. I have more than 150 large different scenes.

- Is there are any examples of live applications or games that are built using Angular and Babylon.

- If this approach is not good for large applications, please suggest me any other framework that will help me to implement front-end as well as Babylon in it.

[brianzinn]

hi @ghostman - didn't realize you were new to the forum, so welcome!  For sure there are people who have succeeded with Babylon and Angular, but I can't point you to any examples.

35 minutes ago, ghostman said:

please suggest me any other framework that will help me to implement front-end as well as Babylon in it

I am definitely not suggesting that you choose React, but can point out some examples that I have created:
https://brianzinn.github.io/create-react-app-babylonjs/ (JavaScript)
https://brianzinn.github.io/create-react-app-typescript-babylonjs/ (TypeScript)
https://brianzinn.github.io/react-redux-babylonjs-starter-kit/ (JavaScript and deprecated, but has a working game)

I'm absolutely certain you could get all of those examples working in Angular and vue.js.  I just don't know any other examples.

Hopefully somebody can chime in with some Angular examples for you!

[ghostman]

2 hours ago, brianzinn said:

hi @ghostman - didn't realize you were new to the forum, so welcome!  For sure there are people who have succeeded with Babylon and Angular, but I can't point you to any examples.

I am definitely not suggesting that you choose React, but can point out some examples that I have created:
https://brianzinn.github.io/create-react-app-babylonjs/ (JavaScript)
https://brianzinn.github.io/create-react-app-typescript-babylonjs/ (TypeScript)
https://brianzinn.github.io/react-redux-babylonjs-starter-kit/ (JavaScript and deprecated, but has a working game)

I'm absolutely certain you could get all of those examples working in Angular and vue.js.  I just don't know any other examples.

Hopefully somebody can chime in with some Angular examples for you!

@brianzinn thanks for reply, I'll try this.

[ghostman]

Hi, Sebavan

I have tried this but it's not going to work for me. Some textures are not loading into the scene. 

Quote

you can have a look at this doc explaining some of the configuration for angular: http://doc.babylonjs.com/resources/babylonjs_and_ionic_angular

 

[droggam]

@ghostman

0️⃣1️⃣2️⃣

ghostman dont give up Im too doing angular, and since everything is classes to angular more or less.

You need to work with

AfterViewInit

import { Scene, Engine } from 'babylonjs';

If using TypeScript, don't forget to add 'babylonjs' to 'types' in tsconfig.json:

    ...

    "types": [

        "babylonjs",

        "anotherAwesomeDependency"

    ],

    ...

npm install babylonjs --save

[ghostman]

Hi droggam, 

Thanks for the reply.

I have gone through your answer but still, it's not working.

[droggam]

ye i understand but everything seems to load, its 2 textures not loading correctly from what i can tell, THE errors you see has nothing to do with it they just tell you kind of 3 packages not installed I have THE same error.

however to fix your error try this

change importmesh()

to SceneLoader.Append()

so u append scene maybe it fix THE textures problems

@ghostman

And also My createscene FN is void doesnt have to return anything.

but whatever works for you ?

cheers