Angular-CLI + THREE.js blank project using typescript.
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Problem
With Angular 2 out of beta, and Angular-CLI adding webpacks; there is no up-to-date three.js sourcecode. I am looking for a set of instructions that will set up a hello world scene using Angular-CLI.
Required
- Angular 2 (angular-cli) + three.js
- A list of command line instructions and file modifications.
- Three.js must be interfaced via typescript.
Tip($10 each)
- Source on GitHub.
- A implementation of equirectangular skybox.
- Video of implementation (no audio required).
Additionally
I may make a video for the angular community. I will source the winner (unless excplicity asked not to.)

awarded to LayZee

Crowdsource coding tasks.

1 Solution


Complete Angular 2 implementation of Geometry cube at https://github.com/LayZeeDK/ng-three-examples

Initial steps:

1. Install NPM.

2. Open a command prompt in the directory in which you wish to create the app directory.

3. Run npm install -g angular-cli to install the Angular CLI, and make the ng commands available globally.

4. Run ng new ng-three-examples or whatever you want your project-name to be.

5. Enter the app directory (cd ng-three-examples).

6. Run npm install three --save to install three.js.

7. Run npm install @types/three --save-dev to install three.js typings (for TypeScript).

8. Run ng serve to start the app at http://localhost:4200.

9. Run ng generate component cube to generate a three.js component.

10. Follow my example in the GitHub repository.

As you can see in the repo, the key points to integrating three.js in Angular 2 are:

- Use import * as THREE from 'three' to get the typed THREE object.

- Use the @ViewChild decorator with #elementRef to bind the three.js renderer to the component template.

I tried to stay close to the example code to hopefully enable you to more easily make sense of what is going on.

I am certain that I am able to integrate any other examples, you would like.

Feel free to ask me any questions, and to use, and modify the code from the GitHub repo.

UPDATE: Equirectangular skybox added to GitHub repo.
LayZee 3 years ago