Angular 10+ & ThreeJS

@mikegoodstadt the purpose of the ngZone.runOutsideAngular is to avoid triggering the changeDetection for each AnimationFrame loop, because of ngZone will Monkey Patch every object it can reaches, so there will be one way to opt the WegGL stuff out of the ngZone area or just let run specific parts outside of angular.

The problem with removing and adding frames came from that the enging service is injected as root service. Would you remove this and let the service gets destroy with your component then the ngOnDestroy gets triggered, so it depends on your implementation if you want to have only one canvas or multiple ones.

Hey, thanks a lot for this, great time saver and reference.

The template is updated to latest Angular 9.1.0 and ThreeJS 115 compiled without errors.

Have some fun! :slight_smile:

1 Like

Hi there,

I built a small project using your threejs template as seed. And it works really nicely on “ng serve”, but after built, 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?

1 Like

Ok, found it, there was a small error in code that locally was just being ignored, but on the built version it seemed to provoke a cascade error that broke the whole thing. A simple wrong path on one of the textures.

1 Like

The template is updated to latest Angular 10.0.x and ThreeJS 118 compiled without errors.

Have some fun! :slight_smile:


@JohnnyDevNull This is a really cool project! Unfortunately the size of production main bundle is greater than 700 kB. Is there any way to reduce the bundle size?