@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.
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.
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.
@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?
Hi dude, I recently had to use three.js, and your viewing your project is what I want to achieve. Can you teach me how to read obj file, I would greatly appreciate it.
Hello, I loaded model using GTLF Loader and its working. I stored the gtlf.scene in a variable.
I created a new method inside the engine.service file. I invoked it into engine.component.ts file.
I am seeing that, the model is undefined even if its loaded into scene.
thanks for reading my post. engine.component.ts (779 Bytes) engine.service.ts (5.9 KB)
@JohnnyDevNull is how you call the render method within “this.ngZone.runOutsideAngular()” still a good practice? I am just asking because your initial post is from 2018.
I am using Angular 14 with ThreeJS
public animate(): void {
// We have to run this outside angular zones,
// because it could trigger heavy changeDetection cycles.
this.ngZone.runOutsideAngular(() => {
if (document.readyState !== 'loading') {
this.render();
} else {
window.addEventListener('DOMContentLoaded', () => {
this.render();
});
}
window.addEventListener('resize', () => {
this.resize();
});
});
}
@sappytree: If you not opt out the renderer within zonejs this is a important way to not invoke changeDetection with every frame.
So you have two options. The option which is provided in the template, btw this was a PR from someone other who introduced this importend key point or the second way, opt-out zone.js from the requestAnimationFrame. You can do this in the pollyfills.ts file.
Search for __Zone_disable_requestAnimationFrame and un-comment that line.
Then you can directly use the render method without manual opting out with the runOutsideAngular call.
