TypeScript "Extras" Type Definition

Questions
1

With the deprecation of @types/three, the definitions for the “extras” seem to have disappeared. Any solutions for this one? For example, When trying to load MTLLoader, I get this error:
Module '"node_modules/three/src/Three"' has no exported member 'MTLLoader'

I was able to “solve” by installing @types/three@0.93.31 and importing classes with
import { MaterialCreator, MTLLoader, OBJLoader2 } from "../../../node_modules/@types/three";

This is janky. Are there plans for official type support?

Edit: That solution didn’t work after all. So I am stuck with errors in the project till this resolved.

2

Can you provide a code sample showing how you’re import MTLLoader? The typescript definition file is available here: https://github.com/mrdoob/three.js/blob/dev/examples/jsm/loaders/MTLLoader.d.ts.

3

http://prntscr.com/o92t8w Just standard ES6 import syntax.

Error message: Module ‘“node_modules/three/src/Three”’ has no exported member ‘MTLLoader’.

I do find this accurate according to the data in this file: https://github.com/mrdoob/three.js/blob/master/src/Three.d.ts

Thanks for the reply! Let me know what if anything I can do.

4

You cannot import MTLLoader or OBJLoader through the main three.js module – they must be imported from the examples folder. Refer to the examples to see how to do it:

Hope that helps!

5

More problems:
A: I am using OBJLoader2. There are no types for this and I cannot use OBJLoader.
B: I am using RequireJS. In order to import the “extras”, I need to perform 1 request to import Three into the scope of RequireJS, then a few more to import the other modules separately. I expose window.THREE to link the modules together. I really don’t want to rework the entire build system so that the entire project is loaded into one file if I can avoid it.

Is that clear as Mud?
Here is the repo of the project: https://github.com/DakotaLarson/BattleTanks-Client.

Let me know if you have any easy solutions… or hard solutions.

Thanks again for your help!

6

Just to follow up here I was able to solve this problem using Webpack to bundle all the code together into one location. After you install a metric ton of modules, it’s pretty slick.

This is the webpack config I am using at this moment in time: https://github.com/DakotaLarson/BattleTanks-Client/blob/99d527c0e039abc369a4cb187b452cce668d5b57/webpack.config.js.

I bundle both css and js. The css bundle is a little janky, but it works for this project specifically. If ya use sass or something more complex than a single directory of css files, you will have to make alterations if you want to follow this. Hope this helps someone.

7

Yeah, these types are still missing. However, the owner of this module is aware about that.

1 Like
8

Update: The type declaration files for OBJLoader2 were recently added on the dev branch. So with the next release R107 at the end of July you can use them in production.

2 Likes
9

Thank you for your contribution.