How to load textures referenced within materials with Webpack?

Questions
, ,
1

Hello,
I am trying out threeJS for the first time and I am using Webpack. I struggled a bit to figure out how to use assets from my project directory, but I have figured out that I need to use import asset from ../static/asset.png. To be able to import .obj files and .mtl files, I had to modify webpack.common.js to include:

test: /\.(jpg|png|gif|svg|tiff|obj|mtl)$/,
                use:
                [
                    {
                        loader: 'file-loader',
                        options:
                        {
                            outputPath: 'assets/images/'
                        }
                    }
                ]

My problem is: I am trying to import a .mtl file that references textures, like this:

newmtl Toiture
Ns 41.838861
Ka 1.000000 1.000000 1.000000
Kd 0.347252 0.347252 0.347252
Ks 0.500000 0.500000 0.500000
Ke 0.000000 0.000000 0.000000
Ni 1.450000
d 1.000000
illum 2
map_Ks Wall_Stone_003_SPEC.jpg

Webpack isn’t able to locate the Wall_Stone_003_SPEC.jpg texture. I am not sure where I should put the textures or if I am supposed to import them somehow?

Any help is appreciated!

2

It’s not a webpack problem, the assets should be available in a public directory, something like https:// myapp .com/public/assets/Wall_Stone_003_SPEC.jpg, in general the path to the assets inside the .mtl file is relative so you may need to put the .mtl file and its assets in the same public directory.

Not sure about .mtl loader, I’ve never used it before, but all Three.js inherit the same loading manager, so it should be the same.

3

If you place files in the static folder, then you need to specify the path to them in the js script itself, as relative. For example. There is a file /static/image.jpg
When raising the server or when building, accessing it from the browser side will be as follows:
http://localhost/image.jpg
Those. in the script itself, you need to specify the path without …/static/, but simply /image.jpg, if the /image.jpg file is at the root.
If you put it in a subfolder:
./static/some_folder/image.jpg
then you need to contact /some_folder/image.jpg