Angular 19+ & ThreeJS

JohnnyDevNull · 2019-01-14T22:38:06.736Z

Now fresh updated to Angular 7.2 and ThreeJS 100! Have some fun with it!

CreativeHouseDotOrg · 2019-01-28T10:02:28.965Z

What about the Example Modularizations like OrbitControl or LensFlareElement? Are those covered in your template?

JohnnyDevNull · 2019-01-28T16:46:17.542Z

They are mentioned in the “Three Links” section in the readme. The package called three-full.

The Template is a basic starter, you can install everything you need via npm.

Leon · 2019-01-28T17:07:33.545Z

I’d like to mention a caveat when working with angular.
It uses zone.js as it’s change detection strategy. This means that zone.js hooks onto requestAnimateFrame, and runs angular’s change detection on each tick.

This is very expensive and you will notice a big performance degradation.

What you need to do is to create a new file in the src folder called ngzone-flags.ts
which you import at the top of your polyfills.ts file.

in this file you should have this:

(window as any).__Zone_disable_requestAnimationFrame = true;
(window as any).__zone_symbol__BLACK_LISTED_EVENTS = ['scroll', 'mousemove', 'touchmove'];

This will tell zone.js to not hook these events.

To check if it worked you can use the performance panel in chrome and run in for a while, to then check the callstack for each request animate frame.
There should be no call to zone.js in there.

Hope this helps as it took me a while to realize why my threejs apps where running so slow in angular

Ps.
It could potentially break other angular libraries that are dependant on these events, so keep that in mind.

CreativeHouseDotOrg · 2019-01-29T06:23:41.182Z

JohnnyDevNull:

They are mentioned in the “Three Links” section in the readme. The package called three-full.

Unfortunately I already did try the three-full npm package and I didn’t get the expected results… Could you explain to me: How would you import the LensFlareElement Class from a (working) Module with the three-full package?

Sorry for my dull questions but I am relatively new to angular and just to mention that I don’t have any clue about webpack, systemjs and what they all are called. I don’t even know how relevant that should be for a beginner. As far as my concern goes, managing to import unsupported modules shouldn’t be a worry at all

Creative Regards

JohnnyDevNull · 2019-01-29T21:41:10.685Z

Well i think i found a solution for this: https://github.com/Itee/three-full/issues/12#issuecomment-433426345

this could be a example conifg:

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "es2015",
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ],
    "paths": {
      "three-full": ["node_modules/@types/three"]
    }
  }
}

then you should be able to import it like this:
import { LensFlareElement } from 'three-full';

CreativeHouseDotOrg · 2019-01-30T18:40:13.553Z

Thank your for your reply. I’ve tried your approach and I still get the same is not a constructor error. See the screenshot below:

ErrorOutout1289×496 53.6 KB

I am also referring from this Topic:
How do I include THREE.LensFlareElement in Angular Project?

As from @Mugen87’s reply:

Fortunately, there will be a node script with the next release R101 that can generate modules from example files: Added script to generate modules out of example/js files

Whereas on the Milestone Page the progressbar indicates 42% complete. So i don’t think that there will be an easy solution in near time for using example based classes, even with third-party libraries or templates.

Anyway I’ll just leave this as a review for the angular template (non-ionic version) and thank you for your time.

Creative Regards

yunseok · 2019-11-05T05:52:35.831Z

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

JohnnyDevNull · 2019-12-03T19:48:59.297Z

FYI:

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:

image1105×437 66.7 KB

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 tsconfig.app.json. In my actual template version i’ve done this already. (see also here: Cannot find name 'WebGL2RenderingContext')

makimenko · 2020-01-02T09:08:49.582Z

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: https://github.com/makimenko/angular-template-for-threejs/commit/d319384ee86a8d893ff26008087e6838d50a9373

Fluqz · 2020-01-16T16:24:36.472Z

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.

mo3nia · 2020-01-20T12:51:23.762Z

Unfortunately downgrade typescript

JohnnyDevNull · 2020-01-20T19:11:41.823Z

See there https://github.com/angular/angular-cli/issues/16071

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.

Jordan-Hall · 2020-01-29T12:48:21.554Z

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

Fluqz · 2020-01-29T12:49:33.519Z

Solved here https://github.com/angular/angular-cli/issues/16071

JohnnyDevNull · 2020-02-02T04:01:24.195Z

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

mikegoodstadt · 2020-03-10T17:32:52.233Z

Thanks! Here is it tested on StackBlitz
https://angular-three-template.stackblitz.io

mikegoodstadt · 2020-03-10T18:20:11.214Z

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

Inject canvas as ViewChild

Run renderer loop outside NgZone
https://github.com/JohnnyDevNull/ng-three-template/commit/038ea75e2425d24987d77816174294beb34a97c9

mikegoodstadt · 2020-03-11T00:46:31.389Z

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): https://angular-three-template.stackblitz.io/
For example, at the start of the animate() function seems a good place to call it…

JohnnyDevNull · 2020-03-11T16:22:19.651Z

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