I have downloaded few 3D models from sketchfab website. Imported them to blender and exported using gltf exporter to .gltf file and used the same file in three js to display the 3D image on browser...(I didn't apply textures in blender as I want to apply the texture files directly in threejs). I could do everything successfully but unable to understand how to map the texture files in three js... i.e. the downloaded zip from sketchfab contains 3 texture files and I need to apply them to the 3D object... How to decide what maps to use i.e. diffusemap, specular map etc....to apply these textures. Also, I want to decide the texture map programmatically based on texture image... Is it possible? I need to decide it programmatically only because the end user who uses my application will just give the 3d model i.e. (.obj, .3ds etc...) file as input along with the texture files and expect to see the full 3D object on browser with perfectly applied textures. Can anyone please help me on this?
2 Answers
Yes. This might be pretty tricky to solve. The approach that I have used/am using presently.. is to allow the user to upload the files to the server, then using three to load it from the server. This requires that the paths to the textures be relative paths.. (which isn't always the case.) But seems to work well enough for my purposes..
I couldn't find a way to consistently allow me to intercept the loading of the different parts, within three.js. It would be nice if there was an interface to the loader that allowed you hook in a "resource provider" that the loader uses to get the assets for a given thing being loaded. So by default, it would just load things as normal, but if you supplied a callback, you could intercept the URL and redirect it, or synthesize a "File" object in memory to use as the response. That could enable things like preprocessing textures, and remapping missing/absolute texture references.
I suppose you could implement this on the server by intercepting the request and remapping them, but that sounds really complicated since it would require the server to maintain per user state about the context of what they are requesting, and manage the whole lifecycle of that.
But in my explorations, I didn't find a way to do this, so for now I either keep the models in their original format, (as a directory on my server, along with their textures/animations/etc) or I store them temporarily, allow the user to inspect them/fix them up/resize them/group them, and then I export the result from those operations into THREE.JSON format or GLTF, and save that to my server.
Hope that helps, and I hope some people perhaps chime in with more info....
Thanks Manthrax. My application takes 3D model (.obj, .dae etc...) and texture files as input and gets transcoded to gltf format file which is taken as input to threejs to display complete 3d object on browser.. This is what I need to achieve.. I implemented changes as required. I downloaded few models from sketchfab website and tried to test my application..I thought there will be .mtl files and texture files will be linked to them or texture files may be linked to main file (.obj, .3ds etc...). However, I couldn't see any such links and I thought that I need to link the texture files to appropriate maps( diffuse map etc...) programatically in threejs in order that I can see the image with textures on browser. Now the problem is what texture file should be linked to what map.. and now after seeing your replies I understood that it can't be done without user intervention.. The application may need to provide a platform/or dialog box to the user to link the texture files to respective maps. Is this the correct understanding.. This issue is not faced when importing files where already the links exist in .obj/.mtl files because the generated .gltf file will have the links to the textures and gltf loader gives the correct JSON and hence the complete image with textures can be displayed on browser.. Please correct me if I am wrong.
