Angular 10+ & ThreeJS

What about integration with Physijs? I’ve tried this module everything works fine except for the ammo.js part where I’m getting “something is not a constructor” error


Three 0.111.0 is actually not compatible with TypeScript ~3.5.3 which is the latest Angular Dependency, so if you do a fresh install of my template you have to stay with max version 0.110.0.

Thats the last version i can compile without any errors.

For newer ones you will get the following errors:

We have to wait until Angular update the TypeScript dependency or try it yourself.

…and as a side note: Install @types/webgl2 and add it to the In my actual template version i’ve done this already. (see also here: Cannot find name 'WebGL2RenderingContext')

Hack / workaround:

  • upgrade typescript to 3.7.4
  • disableTypeScriptVersionCheck=true in tsconfig.json
  • Include into polyfills.ts:
    // @ts-ignore
    window.__importDefault = function(mod) {
      return mod && mod.__esModule ? mod : { default: mod };

Sample commit:

Hey, im having angular 8.2.14. I updated typescript to 3.7.4 and included the disableTypeScriptVersionCheck in my tsconfig.json (I dont have a tsconfig.lib.ts?) and added the 2 lines of code to my polyfills. Tho its not working! What am I doing wrong? I really need that to work soon. : (

ERROR in The Angular Compiler requires TypeScript >=3.4.0 and <3.6.0 but 3.7.4 was found instead.

Unfortunately downgrade typescript

See there

You could try the 9-rc8 with the options described in the issue or just downgrade your typescript version together with the Three.js Version to the latest working described in my post above.


To solve this issue just add disableTypeScriptVersionCheck under angularCompilerOptions in your tsconfig.json

  "compileOnSave": false,
  "compilerOptions": {
"angularCompilerOptions": {
    "fullTemplateTypeCheck": true,
    "strictTemplates": true,
    "disableTypeScriptVersionCheck": true,
    "trace": false
  "exclude": ["node_modules", "tmp"]

Allows you to use unsupported version of typescripts without errors. I’m using ts version 3.8

Solved here

The template is now updated to Angular 9 and working on latest ThreeJs with Typescript 3.7

1 Like

Thanks! Here is it tested on StackBlitz :slight_smile:

There is no reply to this but can I assume that this is now dealt with by “this.ngZone.runOutsideAngular” in the animate() method?
This was pushed shortly after your comment, on 29th Jan 2019:

Performance Update

Am I correct in thinking that the ngDestroy needs to be called to ensure disposal of previous scenes (causing accelerated/faster and faster spinning)?
I have added buttons on this StackBlitz to simulate what happens (in my app it gets triggered in other more intricate reloading events):
For example, at the start of the animate() function seems a good place to call it…

@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?

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.