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

NEW APPROACH

just import OrbitControls from example modules

import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

OLD ANSWER

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

1. Install 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);