asdf asdf - 4 months ago 207
HTML Question

Using Threejs + OrbitContols in TypeScript

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

I have

<script src="lib/three.min.js"></script>
and
<script src="lib/OrbitControls.js"></script>
in my html
<head>
and the typescript file in
<body>
:

/// <reference path="lib\three.d.ts" />
...
this.controls = new THREE.OrbitControls(this.camera); //there's the error
this.controls.addEventListener('change', this.render);
...


and

this.controls.update();


in periodically called
render()
function. For all I know, the setup is identical to the expample, but gives me a huge error (abbreviated) on compilation of the OrbitControls constructor line:

The property 'OrbitControls' does not exist on value of type '{REVISION:string;
CullFace: {[x: number ...


I guess there's whole Threejs in that error, since Visual Studio crashes the moment I click on it :). Thanks for your help.

Answer

Feeling kind of silly since the solution (or workaround at least) turns out to be quite simple...

Just declare the OrbitControls variable:

declare var THREE.OrbitControls: any; // even "declare var THREE.OrbitControls;" will do the trick

There are still some compilation errors but it works.

Comments