Pfthb

After few hours spend on this problem, I ended up creating a new package: three-orbitcontrols-ts

import * as THREE from 'three';
import OrbitControls from 'three-orbitcontrols-ts';

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

Importing the OrbitControls directly from the source file after importing THREE worked great for me (without using the three-orbitcontrols-ts package):

import * as THREE from 'three';
import 'three/examples/js/controls/OrbitControls';

Using only the three and @types/three packages

While previous answers may work out to some degree, you should go with the ready made definition files from DefinitelyTyped. They also define OrbitControl's properties and methods.

I tried some of the suggested solutions and could not get it to work right so after some experimentation, I ended up with:

import * as THREE from 'three';
import OrbitControlsLibrary = require('three-orbit-controls');
var OrbitControls = OrbitControlsLibrary(THREE);
...
this.controls = new OrbitControls(this.camera);

I am using webpack bundling and with this I did not have to add the script tag in the HTML template.

Unfortunately none of above answers solved problem for me. I have found solution without installing third party packages by creating three.js file with below content:

import * as THREE from 'three';
window.THREE = THREE;
require('three/examples/js/controls/OrbitControls');

export default THREE;

and then import THREE from './three';

The answer didn't work for me in eclipse typescript, since it conflicted with the reference statement earlier. But the following works:

declare module THREE export var OrbitControls

After adding the three-orbitcontrols typings and three-orbit-controls npm package (why aren't these named the same?), I was still having issues getting it to work in Typescript. This ended up working for me in case it's helpful for anyone else who doesn't want to use the workaround:

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

let camera = new three.PerspectiveCamera(75, aspectRatio, 1, 1000);
let renderer = new three.WebGLRenderer();
let controls = new three.OrbitControls(camera, renderer.domElement);

As of today, it seems that the OrbitControls npm package is using an old style of exports that requires an old-style require statement that passes in the Three library.

outside ts:

var THREEa = THREE;

inside ts:

var controls = new THREEa.OrbitControls(pCamera, pContainer);

I was not able to get anything from here this post actually worked and seemed consistent or had enough detail to be actionable. Hopefully, this answer might provide some insight to others.

In my objects I already had three working by using typings to extract the THREE ts file. This was very reasonable and put the ts file in typings/globals/three.

Here are the steps assuming that you have downloaded and installed node.js. This also installs npm (Node Project Manager) which you can run from a command prompt to so all the steps below.

npm install typings --global
typings install dt~three --global --save

At this point all the basic THREE types are available once I "include" the ts file in my object:

/// <reference path="typings/globals/three/index.d.ts" />

At this point OrbitControls is not defined because the basic three package does not include it. However, there is ts data in the typings database. So I installed it as well:

typings install --globals three-orbitcontrols --save

It puts the ts file here:

node_modulesthree-orbitcontrols-tsdistindex.d.ts

I tried a number of things to get it to work but I am missing something. Generally the error was that THREE.OrbitControls was not defined. If I removed the THREE then it generated non-working JavaScript.

What I finally did which I consider a workaround is edit typings/globals/three/index.d.ts and cut and pasted the contents of typings/globals/three/OrbitControls/index.d.ts into the THREE namespace at the end.

At the top of the OrbitControls/index.d.ts it calls out <reference types="three" /> which doesn't work because in that context it cannot find "three". Once I worked around that it compiled but it generated non-working code.

I've also had some bad luck implementing the suggested solutions as none of them made the typescript compiler happy. Couldn't overwrite THREE.OrbitControls at compile time because it was set to read-only. My solution was as follows:

Install both 'three' and 'three-orbit-controls' with npm. (This is kinda dumb but necessary since 'three' already contains all the code for the orbit controls in the examples/js/controls/OrbitControl.js file but doesn't export it in a way that typescript understands. If you don't want to mess with your 3rd party libraries, just install 'three-orbit-controls' alongside 'three' which contains a duplicate of the code but exports it in a nice way.

Now use it like below:

import * as THREE from 'three';

import * as OrbitControlsFunction from 'three-orbit-controls';

const OrbitControls = OrbitControlsFunction(THREE); // OrbitControls is now your constructor

const controls: THREE.OrbitControls = new OrbitControls(camera, element); // Code as you would from here on out.