Angular + ThreeJS

angular
#1

Dear ladies and gentleman,

for playing around with some web gl rendering i started playing with threeJS a few years ago, but now i will dive a little bit deeper.

So here are my angular template project 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:

Angular 7.2 + ThreeJS

The Template have the example code running.

Have some fun!

Original from: http://www.html5gamedevs.com/topic/37423-angular-babylonjs-and-angular-threejs-template/

3 Likes
#2

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

#3

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

#4

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.

#5

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 :slight_smile:

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

3 Likes
#6

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 :confused:

Creative Regards

#7

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';

#9

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:

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