CODEWITHSUNDEEP
javascript3d
Jeff Straney
Jeff Straney

Reputation: 41

Three.js texture is not loading - what would cause this?

I am trying to create a scene using .obj and .mtl files exported from blender. The object is literally just a rectangle (it needs to be a .obj file. more objects will be added to create a scene) I am able to see the material load, but cannot see the texture being applied in chrome or firefox.

the mtl file text

the obj file text

Here is the javascript code:

const obj_loader = new THREE.OBJLoader(),
      mtl_loader = new THREE.MTLLoader();
   
// uses example of OBJ + MTL from three.js/examples
mtl_loader
.setTexturePath('bar/')
.setPath('bar/')
.load('floor.mtl', (materials) => {

  materials.preload()

  obj_loader
  .setMaterials(materials)
  setPath('bar/')
  .load('floor.obj', (object) => {
  
    // everything returns status 200!
    // material is being applied but no texture
    scene.add(object);
  
  })
});

project file structure

Checking the console, requests for the mtl, obj, and image files are returning 200 status codes

but the model renders without texture

No errors are in the console at all. What would cause this issue in Three.js? I suspect something is wrong with the .obj or .mtl but I cannot find the problem. (the file paths are correct based on the logged ajax request).

Upvotes: 1

Views: 1793

Answers (2)

Jeff Straney
Jeff Straney

Reputation: 41

It turned out to be an issue with the UV mapping of the texture. In Blender, you can create a texture, and Blender will show the texture in 'render' mode, even if the UV map is not set (It will wrap automatically).

Blender showing render, even without UV Map

This was especially frustrating because I had these settings when exporting the file:

export settings for OBJ

The MTL and OBJ file appeared to have all the content in it, but by manually UV mapping the texture (instead of using a simple repeat in the "texture" menu) the issue was resolved when I exported again.

UV/Image editor needed to be used

Sorry for any confusion that may have caused. I hope it helps anyone who has the same issue exporting from Blender.

Upvotes: 1

Dacre Denny
Dacre Denny

Reputation: 30360

This may be due to the .preload() method not being called on the materials object returned in the material load callback. The preload() method basically creates the material objects loaded by the MTLLoader.

Consider the following updates, with this method call added:

const mtl_loader = new THREE.MTLLoader();    
mtl_loader.setTexturePath('bar/');
mtl_loader.setPath('bar/');
mtl_loader.load('floor.mtl', function(materials) {

  // Add this (see link below for more detail)
  materials.preload()

  const obj_loader = new THREE.OBJLoader();
  obj_loader.setMaterials(materials);
  obj_loader.setPath('bar/');
  obj_loader.load('floor.obj', function(object) {

    scene.add(object);  
  })
});

Here is a link to the THREE source code which shows the inner workings of .preload() - hope this helps!

Upvotes: 1

Related Questions