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 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:

/// 

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 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.