I have been experimenting with using ThreeJS ES6 native modules directly in the browser. It's quite exciting to be able to import
ThreeJS right into my javascript files without needing a module bundler.
In javascript, it works like this:
import * as THREE from './lib/three.module.js'
import { OrbitControls } from './lib/OrbitControls.js'
Now, I am attempting to achieve the same thing in Typescript. I installed the typescript definitions using
npm install --save @types/three
However, even after that, VS Code is still unable to locate the type declaration files:
⚠️ Could not find a declaration file for module '../lib/three.module.js'
⚠️ Could not find a declaration file for module '../lib/OrbitControls.js'.
After following suggestions from comments, I modified the imports to:
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'
Although the declarations can now be found, Typescript is still having trouble locating the modules!
⚠️ An accessor cannot be declared in an ambient context and Failed to resolve module specifier "three".
⚠️ Relative references must start with either "/", "./", or "../".
I am left wondering how I can effectively use ES6 native modules from ThreeJs in my Typescript project without resorting to a module bundler?