Currently, I am using a grayscale image as a bump map for my model. The model consists of an .obj file paired with the corresponding .mtl file for UV mapping. Below is the code snippet that I am utilizing:
// Load material file
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;
model = new THREE.Mesh(geometry, otherModel.material.clone());
scene.add(model);
render();
callback();
});
});
Later on, when needed, I add the bump map to the model:
model.material.bumpMap = new THREE.Texture(canvas);
model.material.bumpScale = 0.8;
model.material.bumpMap.format = THREE.RGBFormat;
model.material.bumpMap.wrapS = mapRingModel.material.bumpMap.wrapT = THREE.RepeatWrapping;
model.material.bumpMap.minFilter = THREE.LinearFilter;
model.material.bumpMap.needsUpdate = true;
model.material.needsUpdate = true;
Although this method works properly, I want to use my texture as a displacement map instead of a bump map. So, I modified the code to achieve this:
model.material.displacementMap = new THREE.Texture(canvas);
model.material.displacementScale = 0.8;
model.material.displacementMap.format = THREE.RGBFormat;
model.material.displacementMap.wrapS = model.material.displacementMap.wrapT = THREE.RepeatWrapping;
model.material.displacementMap.minFilter = THREE.LinearFilter;
model.material.displacementMap.needsUpdate = true;
model.material.needsUpdate = true;
Despite applying the same texture, the displacement effect is not being applied at all. Are there any adjustments I need to make in terms of my UV mapping or texture to make it work as expected for displacement mapping?