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

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

编辑：Phong Shader仍然存在翻转频道的问题。我最终使用了＆＃34;法线贴图着色器＆＃34; （参见Three.js例子），这给了我正确的结果。不幸的是，法线贴图着色器不适用于Morph动画，只有Skeletal。