Angular2 using threejs Orbitcontrols

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

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

See 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 into a module and use them in Angular typescript code could be a little bit tricky. Especially, if you don't want to install additional third-party dependencies. One of solution/workaround could be:

Firstly, include dependencies:

three
@types/three

Secondly, import in 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 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 could help you to start


as few of you are experiencing my same problem I have posted this as a answer to make it more visible.

The solution above works but you might get the following error:

'Cannot find name 'require'

If this is the case add the line suggested by Grunk:

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

before the declaration:

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