Change obj model material in three.js

Question

I have a 3D model with UV mapping created in blender. I applied the UV mapping in a way that the texture is only applied on one side of the model. I exported the model as obj and mtl. When I import this model on three.js it works as intended and the loader automatically applies the image defined in the mtl file as the texture.

Now I want to change this texture programatically in three.js. The model has multiple materials (I think it's because of multiple faces). How do I reapply the material maintaining the UV mapping and just changing the texture applied? I want to apply a map and a envMap to the model.

                       var m = new THREE.MeshPhongMaterial({
                            envMap: cubemap,
                            reflectivity: 0.9
                        });
                        var m2 = new THREE.MeshPhongMaterial({
                            envMap: cubemap,
                            color: parseInt(material.color, 16),
                            reflectivity: 0.9,
                            map: THREE.ImageUtils.loadTexture('/textures/uv_checker large.png')
                        });

                        loadedMesh.material = [m,m,m,m,m,m2,m2,m2,m];

With the m and m2 positions applied after some trial and error. The texture is applied but it doesn't end up looking the same way as the original. II have some small empty spaces and even texture on places I shouldn't have texture due to my UV mapping.

How can I approach this?

I never use the OBJMTLLoader as I have had problems in the past, I would load the model with the OBJLoader then create the material separately. — 2pha, Mar 30 '17 at 04:40

score 0 · Accepted Answer · answered Mar 30 '17 at 19:01

Ok I found a way. I don't know if this will work with all the models but I replaced all the materials that had a map texture with my custom material with another texture and replaced all the other materials with another different material. It worked perfectly and the UV Map was still there.

var m1 = new THREE.MeshPhongMaterial({map: texture, ...});
var m2 = new THREE.MeshPhongMaterial({...});
for(var n = 0; n < model.material.length; ++n) {
   if(model.material[n].map) model.material[n] = m1;
   else model.material[n] = m2;
}

Change obj model material in three.js

1 Answers1