Using the ThreeJS definition files with the built version

Questions
,
1

I’m working on a TypeScript project (compiled to JS) that uses the build version of ThreeJS “build/three.js” (preloaded from the HTTP page).
In order to work with it in VisualStudioCode, I’m using the types definition files from DefinitelyTyped “@types/three”.
But @types/three is never up to date with the latest version (I’ve tried to contribute with some updates myself and it is a pain to pass their reviews).

I see that the latest versions of ThreeJS include their own definition files (*.d.ts) in the source code.

Can I use those definition files somehow for the built version (three.js or three.module.js), or is there some already compiled definitions file to be used with it?

2

Sounds like you’ve ruled out both out-of-the-box options.

  1. If you want to use the build version of Three.js, you’d need to include definition files from DefTyped.
  2. If you want to import it to your project as a module, the type definition files are included in the modules.

There’s a third option that’s more time-consuming, I used to employ this about 2 years ago:

  • Include the build version as an external source.
  • Copy-paste all Three.d.ts files and its dependencies from DefinitelyTyped or from the Three.js repo into the root of your source directory: src/types/Three.d.ts so the compiler can find it.
  • Whenever you need to make any definition updates on the fly, just manually overwrite your local copy of the *.d.ts. file without having to wait for DefinitelyTyped approval.

I stopped using this method because it was very time-consuming to set up, but it might help in your case.

4

The package JSON sets the types property in order to point to the bundled declaration file. I think when using the npm version of three.js, VisualStudioCode should be able to use the respective type definitions.

5

Also worth noting, I think r101 was the first release that included TypeScript definition files so @Eketol, make sure you’re not using an older version. Preferably use r103, since it’s got a bunch of TS fixes.

1 Like
6

This issue still exists in current version, and make inconvenient.

we have two ways to import components from three.js:

  1. import { WebGLRenderer, Scene } from 'three/build/three.module'

this way need a type definition file for three.module.js, if not we will lose all tips in vs code.

  1. import { Scene } from 'three/src/scenes/Scene'

this way that importing three.js component as module from its own source file, is not compatible with those from examples/jsm, because all of them import components from /build/three.module.js;

for example, if we build mesh by:

import { BufferGeometry } from 'three/src/core/BufferGeometry'

then we use some component from examples/jsm, like TransformControls

import { TransformControls } from 'three/examples/jsm/controls/TransformControls'

then problem comes:

we use BufferGeometry from its source file, but TransformControls use it from build/three.module.js, there are two different instances of BufferGeometry, they produce two internal id, make render list chaotic.

EDIT: I found a temporary solution under vs code:

  1. copy three/src/three.d.ts to three/build folder, and rename it to three.module.d.ts
  2. vs code will automatically correct the import path.
  3. use this file as the type definition file for three/build/three.module.js