Question:

I have added a normal map to a model in Three.js that is mirrored down the middle. It looks like one of the channels (green perhaps?) is flipped on the mirrored side.

<img alt="enter image description here" class="b-lazy" data-src="https://i.stack.imgur.com/SJXnP.png" data-original="https://i.stack.imgur.com/SJXnP.png" src="https://etrip.eimg.top/images/2019/05/07/timg.gif" />

I have one ambient light, one directional headlight, and one spotlight. Here is the code that I use to make the material:

// Create a MeshPhongMaterial for the model var material = new THREE.MeshPhongMaterial(); material.map = THREE.ImageUtils.loadTexture(texture_color); // Wrapping modes //THREE.RepeatWrapping = 1000; //THREE.ClampToEdgeWrapping = 1001; //THREE.MirroredRepeatWrapping = 1002; 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 ); // Turn on shadows mesh.castShadow = true; if (shadows) { mesh.receiveShadow = true; } scene.add( mesh );

I tried all of the different combinations of material.normalMap.wrapS and material.normalMap.wrapT but that didn't solve it (tried diffuse map too). What am I doing wrong?

Thank you!

Normal maps are dependent on the geometry, so you can't just mirror it and expect it to work like a diffuse texture would.

To make it work, you need to flip the normal map's red channel wherever the UVWs are mirrored on the model.

<a href="http://www.polycount.com/forum/showthread.php?t=116922" rel="nofollow">http://www.polycount.com/forum/showthread.php?t=116922</a>

Turns out I was using an older version (1.2) of the Blender Three.js exporter. By switching to the latest version (1.5) of the exporter from the r67 repository, <strike>Three.js now correctly handles mirrored normal maps with its Phong shader out of the box.</strike>

Edit: The Phong Shader was still having issues with the flipped channel. I ended up using the "Normal Map Shader" (see the Three.js examples) and that gave me correct results. Unfortunately the Normal Map Shader doesn't work with Morph animations, only Skeletal.