Angular + BabylonJS and Angular + ThreeJS Template

[JohnnyDevNull]

Dear ladies and gentleman,

for playing around with some web gl rendering i started playing with threeJS a few years ago, but wanted also to get a look in babylonJS.

So here are two angular template projects which i want to share with all of you who also want to play something around with or maybe to built a real app from with it:

Angluar 7 + BabylonJS

https://github.com/JohnnyDevNull/ng-babylon-template

Angular 7 + ThreeJS

https://github.com/JohnnyDevNull/ng-three-template

Both have the example code running.

 

Have some fun!

[8Observer8]

Hello, thank you for your job!

I have a little question. I want to add the OrbitControl:

import * as THREE from 'three';

export class EngineService
{
    // ...
    private controls: THREE.OrbitControls;
    // ...

    createScene(elementId: string): void
    {
        // ...
        this.controls = new THREE.OrbitControls(this.camera);
        // ...
    }

    render()
    {
        // ...
        this.controls.update();
        // ...
    }
}

I see the warning message in the VSCode console:

Quote

WARNING in ./src/app/engine/engine.service.ts
19:28-47 "export 'OrbitControls' (imported as 'THREE') was not found in 'three

And I see the error message in the browser console:

Quote

AppComponent.html:1 ERROR TypeError: three__WEBPACK_IMPORTED_MODULE_0__.OrbitControls is not a constructor
    at EngineService.push../src/app/engine/engine.service.ts.EngineService.createScene (engine.service.ts:35)

 

[JohnnyDevNull]

I think OrbitControl must be imported seperate, i will take a look at...

Edit:

Ok this looks strange... the problem is, that many extensions of ThreeJS are not modules.

Here at the last post should be a workaround: https://github.com/mrdoob/three.js/issues/9562

I will test it and come back later...

[JohnnyDevNull]

There is something: https://github.com/nicolaspanel/three-orbitcontrols-ts

Looks like this is the solution.

[JohnnyDevNull]

Push

[colibri]

have you decided?

[JohnnyDevNull]

Updated the topic to Angular 7, latest BabylonJS Alpha 19 and ThreeJS 100.

Have some fun with it

[JohnnyDevNull]

Updated both Template Projects to their latest Library versions.

Babylons 4 & Three 104.0

[JohnnyDevNull]

Updated both Template Projects to their latest Library versions...

Angular 8+

Babylon 4.0

Three 110

Edited December 4, 2019 by JohnnyDevNull

[JohnnyDevNull]

Updated both Template Projects to Angular 9+

[mdeazley]

Hello folks... Check out my BabylonJS Angular Component: It provides a lightweight Angular 8 component for managing the BabylonJS engine, light, and camera. 

• Project & Docs: https://github.com/krystalmonolith/BabylonJS-Canvas-Component
• Two Page Demo: https://alphapulsar.com/angular/alphapulsar-babylonjs-component/ 
  • Click the button in the upper left to switch between two different renderings: Hello Sphere and Exploded Cube.
  • The default camera is BABYLON.FlyCamera so use the mouse, WASD and QE keys to change the camera position.

[Marc Torruella]

Hi there,

I built a small project using your threejs template as seed. And it works really nicely on "ng serve", but after build, the resulting app doesn't seem to load models and lights correctly,

like if the build process messed things up with threejs or something.

Did you ever encounter this?

 

 

[Marc Torruella]

it was a stupid mistake on a texture variable name that was wrong, and on local it defaulted to an existing texture so it wasn't noticeable and on production the default path was not set, so the error was visible... my bad, sorry.

[JohnnyDevNull]

Updated both Template Projects to Angular 10+

Have some Fun! :)

[JohnnyDevNull]

Updated both Template Projects to Angular 12+

Have some Fun! :)