Angular2 with trjs Orbitcontrols

Question

I am trying to use three examples in my angular (cli) 2 application.

So, I installed threejs:

npm install three --save 

then typings are added:

 npm install @types/three --save-dev 

Finally, my component looks like this:

 import { Component, OnInit } from '@angular/core'; import * as THREE from 'three'; @Component({ selector: 'app-testthreejs', templateUrl: './testthreejs.component.html', styleUrls: ['./testthreejs.component.css'] }) export class TestthreejsComponent implements OnInit { // } 

With this, I can easily use some functions from THREE.

I would like to use the part of the example available in node_modules / three / examples / js /, more specifically OrbitControl. Typics give me autocomplete in visual studio code:

But as soon as I tried to use it, I have the following error:

TypeError: WEBPACK_IMPORTED_MODULE_1_three .OrbitControls is not a constructor

Is there a way to make OrbitControls (and other examples) available through some import? Should I just include control.js in my html?

What is the best way to handle this?

Answer 1

Finally found a solution:

1- Install OrbitControls via npm:

 npm install three-orbit-controls --save 

2- Import into the THREE and Control Orbits component:

 import * as THREE from 'three'; var OrbitControls = require('three-orbit-controls')(THREE) 

Then i can do

 this.controls = new OrbitControls(this.camera,this.renderer.domElement); 

Answer 2

NEW APPROACH

// just import it from examples import {OrbitControls} from 'three / examples / jsm / controls / OrbitControls.js';

OLD RESPONSE

Try using the alternative package https://www.npmjs.com/package/three-orbitcontrols-ts

1. Install the package

 npm install --save three-orbitcontrols-ts 

2. Use in your file

 import * as THREE from 'three'; import { OrbitControls } from 'three-orbitcontrols-ts'; const controls = new OrbitControls(camera, renderer.domElement); 

Answer 3

since few of you are experiencing my problem, I posted this as an answer to make it more visible.

The solution above works, but you may get the following error:

'Cannot find name' require '

If so, add the line suggested by Grunk:

 declare const require: (moduleId: string) => any; 

before the announcement:

 var OrbitControls = require('three-orbit-controls')(THREE) 

Answer 4

See a working example of using Angular + Three.js, including OrbitControls and ColladaLoader: https://github.com/makimenko/angular-three-examples

Currently, Three.js examples are not included in the module and their use in Angular typescript code can be a bit complicated. Especially if you do not want to install additional third-party dependencies. One solution / workaround could be:

First, include the dependencies:

 three @types/three 

Secondly, import into the component:

 import * as THREE from 'three'; import "./js/EnableThreeExamples"; import "three/examples/js/controls/OrbitControls"; import "three/examples/js/loaders/ColladaLoader"; 

Then use it in the code:

 this.controls = new THREE.OrbitControls(this.camera); this.controls.rotateSpeed = 1.0; this.controls.zoomSpeed = 1.2; this.controls.addEventListener('change', this.render); 

Hope this helps you get started.

Answer 5

A monkey patch can also solve this problem:

 // this should be added in the main file of the application import * as THREE from 'three'; window['THREE'] = THREE; import 'three/examples/js/controls/OrbitControls'; 

No need to add any 3JS script related .angular-cli.json files