Using three.js in Angular2

Question

I am trying to integrate a three.js scene into a angular 2 page. I am a beginner in Angular 2 and javascript, I have included the three.js file in the script tag, in index.html, i.e, and in the scene.component.ts file I have the code like this...

//scene.component.ts
import { Component } from 'angular2/core';
import { THREE } from 'three-js/three';
@Component({
    selector: 'ps-scene',
    templateUrl: 'app/webgl/scene.component.html'
})
export class SceneComponent{
    scene = new THREE.Scene();
}
///////////////

The problem is showing in the line - import { THREE } from 'three-js/three';

This is in the same directory path as 'angular2/core'

Thanks in advance.

Benjamin McFerren · Accepted Answer · 2016-10-31 23:01:27Z

5

are you using angular cli?

if so, don't forget to add the reference in your typings.d file:

declare module 'three';

https://github.com/angular/angular-cli#3rd-party-library-installation

3rd Party Library Installation

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev
If the library doesn't have typings available at @types/, you can still use it by manually adding typings for it:

// in src/typings.d.ts
declare module 'typeless-package';

// in src/app/app.component.ts
import * as typelessPackage from 'typeless-package';
typelessPackage.method();

answered Oct 31, 2016 at 23:01

Benjamin McFerren

8725 gold badges21 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2061057 Over a year ago

It seems that the link to the 3rd party library installation documentation doesn't work anymore. Actually I can't find any documentation about this anymore.

amcdnl · Accepted Answer · 2017-01-20 14:22:35Z

3

Checkout this ng2-three-demo, where I use Angular Components to define objects for ThreeJS.

Additionally, there is a presentation on the topic itself in the repo.

answered Jan 20, 2017 at 14:22

amcdnl

8,65813 gold badges65 silver badges104 bronze badges

1 Comment

user2061057 Over a year ago

For me your application was very helpful, thanks a lot. Great work!

hex · Accepted Answer · 2016-11-24 14:49:41Z

2

It probably should be imported like this:

import * as THREE from 'three';

answered Nov 24, 2016 at 14:49

hex

7831 gold badge12 silver badges17 bronze badges

Comments

Bruno Di Giuseppe · Accepted Answer · 2016-10-24 13:29:03Z

1

I'm getting started on Angular 2 specifics about integrating other libraries to your own projects, so my guess is that it'd have to be included in your system.js config folder.

What I really want to show you is this angular 2 + three.js implementation to give you some light on the subject.

I would post it as a comment, but I don't have the reputation yet to do so.

Cheers!

answered Oct 24, 2016 at 13:29

Bruno Di Giuseppe

931 gold badge1 silver badge6 bronze badges

3 Comments

Benjamin McFerren Over a year ago

hoping you can now comment @Bruno Di Guiseppe In that repo you linked to, there is a vender folder where three.js file lives. Is this mandatory or is there a way for the three.js file to live inside of the node_modules directory as a result of referencing "three": "^0.80.1", in the dependencies of the package.json? If so, what is the syntax to import? I am getting "Cannot find module 'three'." when i try this import { THREE } from "three"; inside one of my Injectable service files

Bruno Di Giuseppe Over a year ago

Thanks Ben! So, as far as I understand the "left hand path" of Angular 2, you can create your own .js libraries and make the typings for those to use in angular. I needed to use DeviceOrientationControl library in my project and it had no typings definition. Since in the end angular is going to compile TS into JS, you can have a .js file included in you index.html with a regular <script> tag and write your own definitions and save them on the typings folder.

Bruno Di Giuseppe Over a year ago

Gimme some time and I'll post it on Git for you to see. But all in all, TS definition(for example library.d.ts) it's just like a DLL metadata file. You tell the computer "Hey, I'll be using something that has these functions and parameters. Make sure you don't complain of me using them, ok?" If it finds these definitions you're using in runtime, all's good

Collectives™ on Stack Overflow

Using three.js in Angular2

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related