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

The solution is from this issue. Just install three-full and @types/three and add the types definitions to "compilerOptions" in tsconfig.json.

  "compilerOptions": {
    /* ... */
    "baseUrl": ".",        // needed to use path aliases!
    "paths": {
      "three-full": ["node_modules/@types/three"]
  }
}

Then import THREE like

import * as THREE from 'three-full';

Afterwards everything works fine including intellisense.

Without @types/three,` it still works, but you do not get intellisense.

Answer 2

If you actually still want OrbitControls to be accessed from THREE, the following seems to work for me:

import * as __THREE from 'three';
import * as X from 'three/examples/jsm/controls/OrbitControls.js';

type THREE = typeof __THREE & typeof X

Only real difference is now if you specify the type of controls, it'll look something like

const controls: X.OrbitControls = new THREE.OrbitControls(camera, renderer.domElement)

Answer 3

As described in the docs do the following:

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

Important is that you use the folder jsm instead of js. And keep in mind that not all modules are available in the jsm folder yet

Answer 4

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}

Answer 5

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.

Answer 6

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_modules\three-orbitcontrols-ts\dist\index.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.