Using Threejs + OrbitContols in TypeScript

Question

I\'m not able to get this example of using the aforementioned combo going in TypeScript.

I have and <

Answer 1

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.