Menu
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.
285
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);
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
30
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
42
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
