I am trying to load a model and its textures based on this example, but for some reason, none of the models from Freepik seem to work as intended. I say that, because I have had some luck with other models which do indeed render with their textures. I have reviewed the contents of my .obj and .mtl files to figure out if the problem has anything to do with the textures not being found, but the paths seem correct to me. The only obvious difference is that the files from Freepik are rather large in size, which may cause them to not buffer properly - at least that is one suspicion that I have.
Could anyone explain why my models are missing their textures, and perhaps even share a model with multiple textures that would work with the code that I have written, so that I may learn how these assets should be exported?
I have created a small example using Vite if anyone would like to experiment with my particular scenario. Perform the following steps to get things up and running on your machine:
Download the attached project files.
Download this model from Freepik by choosing the ‘OBJ’ option.
Place the .obj and .mtl files, as well as the textures folder in the public directory of my project.
While in the project root, run npm install to install the dependencies.
Run npm run dev to launch the local web server.
This should render the model without textures, as it did for me:
If the size of textures (each on their own) is below 16000x16000, that shouldn’t be an issue.
Did you check the Network panel in chrome devtools to see if the requests for texture images are resolving properly? (ie. check the actual response preview and see if the response of the request is an image, not some error or XML page.)
This models looks rely entirely on its mapping. It uses roughness/metallic and emission mapping. It has no color textures. The material it uses, seems to be correct, which is MeshStandardMaterial. Make sure you place the maps in the correct folder, on your .mtl file it says:
If this doesnt work re export it as gltf and use gltf loader.
Also, if you are not doing so, then use light sources, I am quite certain some of the maps need it. And not just ambient light.
I have not yet experimented with the GLTFLoader, but I did try to shine more light on the object with a RectAreaLight, however, that seemed to have no effect.
I only see a couple of textures being loaded in the network tab, but when I inspect the loaded materials, all paths can be resolved to grab the textures. I thought that the MTLLoader would import them for me; is that an incorrect assumption?
