Three.js 镜像法线贴图翻转通道

Question

我在 Three.js 中的模型中添加了一个法线贴图，该贴图在中间镜像。看起来其中一个通道（可能是绿色？）在镜像侧翻转。

我有一个环境灯、一个定向头灯和一个聚光灯。这是我用来制作材料的代码：

// 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 );

我尝试了material.normalMap.wrapS 和material.normalMap.wrapT 的所有不同组合，但这并没有解决问题（也尝试了漫反射贴图）。我做错了什么？

谢谢！

Answer 1

法线贴图依赖于几何体，因此您不能只镜像它并期望它像漫反射纹理那样工作。

要使其工作，您需要在 UVW 在模型上镜像的任何位置翻转法线贴图的红色通道。

http://www.polycount.com/forum/showthread.php?t=116922

Answer 2

原来我使用的是旧版本 (1.2) 的 Blender Three.js 导出器。通过从 r67 存储库切换到最新版本 (1.5) 的导出器，Three.js 现在可以使用开箱即用的 Phong 着色器正确处理镜像法线贴图。

编辑：Phong 着色器仍然存在翻转通道的问题。我最终使用了“法线贴图着色器”（参见 Three.js 示例），这给了我正确的结果。不幸的是，法线贴图着色器不适用于变形动画，只能用于骨骼。