After adding a normal map to a mirrored model in Three.js, I noticed that one of the channels (possibly green) is flipped on the mirrored side.
The model has an ambient light, a directional headlight, and a spotlight. Below is the code used to create the material:
// Defining a MeshPhongMaterial for the model
var material = new THREE.MeshPhongMaterial();
material.map = THREE.ImageUtils.loadTexture(texture_color);
// Wrapping modes
material.map.wrapS = THREE.RepeatWrapping;
material.map.wrapT = THREE.MirroredRepeatWrapping;
if (texture_normal != null) {
material.normalMap = THREE.ImageUtils.loadTexture(texture_normal);
material.normalMap.wrapS = THREE.RepeatWrapping;
material.normalMap.wrapT = THREE.MirroredRepeatWrapping;
}
material.wrapAround = true;
material.morphTargets = true;
material.shininess = 15;
material.specular = new THREE.Color(0.1, 0.1, 0.1);
material.ambient = new THREE.Color(0, 0, 0);
material.alphaTest = 0.5;
var mesh = new THREE.MorphAnimMesh(geometry, material);
// Enabling shadows
mesh.castShadow = true;
if (shadows) {
mesh.receiveShadow = true;
}
scene.add(mesh);
I tried various combinations of material.normalMap.wrapS and material.normalMap.wrapT, along with the diffuse map, but the issue persists. What could be causing this problem?
Appreciate any help!