Usage with webpack 5 and typescript

Questions
,
1

Hi, I found the way to use typescript and webpack5 with hotreload.
I declared glb file as module in webpack and typescript, so I can import them and use them as shown. However, what I have to do is this ugly workaround:

import * as Model from './models/model.glb';

new GLTFLoader().load(Model as unknown as string, function (gltf) {
//...
});

I’d like something common like this, but If I use this code, url is undefined and it won’t work.

import Model from './models/model.glb';

new GLTFLoader().load(Model, function (gltf) {
//...
});

What is the correct way to handle it? I really don’t like to have that double cast and import as *

My webpack relevant configuration:

module: {
    rules: [
      {
        test: /\.(glb|gltf)$/,
        type: 'asset/resource'
      }
    ],
  },

My typescript definitions

declare module '*.glb' {
    const value: any;
    export default value;   
}

declare module '*.gltf' {
    const value: any;
    export default value;   
}

three: 0.141.0
webpack: 5.73.0
webpack-dev-server: 4.9.2
html-webpack-plugin 5.5.0

2

I have this working using these settings.

In my typescript projects root folder, I have an index.d.ts, containing

declare module '*.glb'

My webpack 5 config modules section

module: {
    rules: [
        {
            test: /\.tsx?$/,
            use: 'ts-loader',
            exclude: /node_modules/,
        },
        {
            test: /\.glb/,
            type: 'asset/resource',
        },
    ],
},

My tsconfig.json

{
    "compilerOptions": {
        "target": "ES6",
        "moduleResolution": "node",
        "strict": true
    },
    "include": ["**/*.ts"]
}

My .ts script where I use the glb

...
import monkey from './models/monkey.glb'
...
const loader = new GLTFLoader()
loader.load(
    monkey,
    function (gltf) {
       ... //etc

This works for me without showing any errors in the IDE or in the browser. I tested this using webpack dev server and production build served with nodejs.

3 Likes