Search code examples
angularthree.jsangular-cli

Angular2 using threejs Orbitcontrols

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 : vscode

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 ?

Solution

  • 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);