Angular2 using threejs Orbitcontrols

Question

I'm trying to use threejs exemple inside my angular (cli) 2 app.

So i have installed threejs :

npm install three --save

then added typings :

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 use some functionality from THREE without any problem.

I would like to use some of the exemple available in node_modules/three/examples/js/ and more precisely OrbitControl. The typings give me the autocompletion 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 any way to make available OrbitControls (and other exemples) via some import ? Should i simply include control.js in my html ?

What's the best way to deal with this ?

Answer 1

Finally found a solution :

1- Install OrbitControls via npm :

npm install three-orbit-controls --save

2- Import THREE and OrbitControls in the component :

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

I can then do

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