A clean way to load materials and textures externally

Questions
,
1

Normally, when a three.js model is exported as JSON it includes all materials and textures. I would like this data to be loaded from external urls. So my exported JSON would include all 3D data, but just URLs where to load the materials. I’m thinking of a clean way to do this. One way I’m thinking of is to store some extra information in the userData for the meshes, so the userData would look something like this:

userData: {
  extMaterial: {
    url: "http://somewhere/material",
    // maybe more information, like texture scale and rotation
  }
}

And then have a class ExtMaterialLoader that loads the materials and creates real three.js materials from the data. Loading a model would be something like:

let model=...; // First load the model normally using e.g. ObjectLoader
let extMaterialLoader=new ExtMaterialLoader();
await extMaterialLoader.loadMaterialsForObject(model);

Would like to ask for your opinion on this way of doing things. Is there already another established pattern for referencing and loading external materials?

2

Hi @limikael,

I am looking into doing the same thing. My idea was going towards using the names of the objects that will be there. I have this as a certainty since we work with extended data for each object.

So what I was planning to do is have an S3 bucket where the textures have the same naming convention as is used on the objects. My custom render then checks the object, finds the name and fetches the texture by convention.

I do think there is the concern of loading time and I might want to do some caching where textures are fetched once and added in the cache.

My search to find some best practice ideas led me to you post :0)

Did you make any progress on the matter?

Cheers!

3

Hi @Martijn_Benjamin and thanks for your reply!

In terms of progress, I’m more or less using the method I described in my project. The project is here btw: https://textureflow.io/ and the code is part of this NPM package: https://www.npmjs.com/package/textureflow-api

It is kind of deeply buried in the code though, I didn’t turn it into anything more generic though…

Interesting idea to load the material based on the name! I guess this is a bit application specific. If we would want to collaborate and create something we can call “ExternalMaterialLoader” or something like that, I guess we should accommodate for both methods?

4

Interesting. Your plan is to have an open source project of sorts?

Today I will continue my investigation, I will check your code as well. Thanks!
Might be a nice idea for a public repo with configurable use.

Cheers

5

Well, not really “planning”… My initial question was more related to checking if this would be interesting, if there is enough interest, then it could become an open source project… Or something like that…

6

Cool. Yesterday I combined some loading of texture from a url and storing material settings in mongo for MeshPhysicalMaterial where using glass for example. It is very straightforward to do this. In my specific situation I use the name of the object to know what to load.

Where I am going to have to do more investigation is UV mapping. Ideally I do not want to UV map the models by hand and rather have an automated solution to achieve an acceptable quality for externally loaded textures.

I’ll share what I figure out!