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)