[Solved] Import Material Map Images at runtime

Questions
1

Hi,
I use the following call to load a material map texture:
import image01 from ‘…/textures/image01.jpg’;
Later in my code I use the following call to load the texture:
const texture = new THREE.TextureLoader().load(image01)
That works as expected.

But, I have a huge amount of images and I would like to load them at runtime in a function.
I tried the following, but without success:
let image02= await import(‘…/textures/image02.jpg’)
I get the message: Uncaught (in promise) Error: Cannot find module ‘…/textures/image02.jpg’

How can I load the images at runtime?

Thanks Andreas

2

Depends on what webserver you’re using- usually you can put the textures inside a public folder and fetch them from there by just setting loader to ex. “textures/texture1.png” (when the actual texture file is under public/textures/texture.1.png path)

Generally speaking - it’s not much useful to import / require static files.

3

I am using it on a hosted webserver with a wordpress environment.
My code is bundled with webpack.
How can I create a public folder?
When I debug my webpage I can see the images…

image
image860×160 6.95 KB

The link adresse is: webpack://EntryPoint/src/textures/BrushMetal.jpg
What can I do?

4

Using the import statement tells webpack to find a js module to inject in your code at buildtime.
You can use ES6 runtime imports by telling webpack to ignore that import and leave it to runtime.
import(/* webpackIgnore: true */ https://path.to/file)

However in this case using the fetch api will probably help you out a lot more.

5

Thank you. I also found another solution here.
The following code works for me:

const images = {};
function importAll(r) {
r.keys().forEach((key) => (images[key] = r(key)));
}
importAll(require.context(“./textures”, false, /.(png|jpe?g)$/));