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?
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;
}