Angular 2 and Three.js

Question

So I've been attempting to implement THREE.js into my Angular 2 app. I have not been able to successfully import the libraries into Angular 2. There are a few projects that have outdated source code, that run with either Angular 2 (beta) or Angular js. Right now I'd be ecstatic to have a blank project that runs THREE.js, from there I could start my directives.

If anyone knows of any good examples or pointers on how to add THREE.js to an angular 2 project, I'd appreciate it.

Answer 1

You can implement Three.js into your Angular2 app in 2 steps:

1. add the library to your modules with npm install three command;
2. put import * as THREE from 'three' inside your component or service.

For typings support execute npm install --save @types/three.

Answer 2

You should use the angular-cli.json file so the 3 steps would be:

1. Add the library to your modules with npm i three --save command.

2. Include the library in the "angular-cli.json" file in the "scripts" area:

   "scripts": [
       "../node_modules/jquery/dist/jquery.min.js",
       "../node_modules/three/build/three.min.js",
   ],
   

3. Put declare var THREE:any; at the top of your component or service.