I have successfully loaded a model with the corresponding material file (.mtl) into my scene. I am now adding a bump map to it after loading:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
Everything works smoothly when applying the bumpMap just before adding the model. However, if I try to apply the bump map at a later stage, it doesn't work. For example, using this code snippet will not apply the bump map:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('/models/');
mtlLoader.load('model.mtl', function (materials) {
materials.preload();
// Load obj file
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('/models/');
objLoader.load('model.obj', function (group) {
var geometry = group.children[0].geometry;
geometry.center();
model = new THREE.Mesh(geometry, otherMesh.material.clone());
setTimeout(function(){
model.material.bumpMap = new THREE.ImageUtils.loadTexture('images/bump.png');
}, 0);
model.name = "obj model";
scene.add(model);
render();
callback();
});
});
The issue arises when trying to add the bump map using timeout. Even setting
model.bumpMap.needsUpdate = true;