三.js JSONLoader 纹理问题

Question

我正在尝试学习three.js，所以我的下一个个人挑战是从搅拌机导入模型，一切顺利，但一些纹理出现了一些问题（使用演示链接能够看到它）。

这里有一个演示：https://googledrive.com/host/0BynsKHbZoT73elJpaUxqTlprVjQ/demos/3dworld/

在js控制台可以查看素材，也可以查看game.models.tree

从搅拌机导出的材料：

    materials" : [  {
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.699999988079071, 0.699999988079071, 0.699999988079071],
    "colorDiffuse" : [0.699999988079071, 0.699999988079071, 0.699999988079071],
    "colorSpecular" : [0.125, 0.10904927551746368, 0.08209432661533356],
    "depthTest" : true,
    "depthWrite" : true,
    "mapLight" : "Tree_Bark_Tiled.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "mapNormal" : "Tree_Bark_Nor2.png",
    "mapNormalFactor" : -1.0,
    "mapNormalWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "specularCoef" : 15,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
},

{
    "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [1.0, 1.0, 1.0],
    "colorDiffuse" : [1.0, 1.0, 1.0],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapLight" : "Tree_Leaves.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "mapNormal" : "Tree_Leaves_Nor.png",
    "mapNormalFactor" : -1.0,
    "mapNormalWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "specularCoef" : 15,
    "transparency" : 1.0,
    "transparent" : true,
    "vertexColors" : false
},

{
    "DbgColor" : 60928,
    "DbgIndex" : 2,
    "DbgName" : "Material.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [1.0, 1.0, 1.0],
    "colorDiffuse" : [1.0, 1.0, 1.0],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapLight" : "Tree_Leaves.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "mapNormal" : "Tree_Leaves_Nor.png",
    "mapNormalFactor" : -1.0,
    "mapNormalWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "specularCoef" : 15,
    "transparency" : 1.0,
    "transparent" : true,
    "vertexColors" : false
},

{
    "DbgColor" : 238,
    "DbgIndex" : 3,
    "DbgName" : "Material",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.699999988079071, 0.699999988079071, 0.699999988079071],
    "colorDiffuse" : [0.699999988079071, 0.699999988079071, 0.699999988079071],
    "colorSpecular" : [0.125, 0.10904927551746368, 0.08209432661533356],
    "depthTest" : true,
    "depthWrite" : true,
    "mapLight" : "Tree_Bark_Tiled.png",
    "mapLightWrap" : ["repeat", "repeat"],
    "mapNormal" : "Tree_Bark_Nor2.png",
    "mapNormalFactor" : -1.0,
    "mapNormalWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "specularCoef" : 15,
    "transparency" : 1.0,
    "transparent" : false,
    "vertexColors" : false
}],

这是三者在搅拌机中的样子：

如您所见，透明度消失了，树皮中的纹理未正确映射。

谁能解释一下我做错了什么？

谢谢:)

Answer 1

材质导出很脆弱，因为 Blender 和 Three.js 参数之间并不总是有清晰的映射。因此，出口的材料经常需要手工修复。

在这种情况下，导出器错误地猜测 Tree_Bark_Tiled.png 是光照贴图而不是漫反射贴图。要解决此问题，请将所有对 mapLight 和 mapLightWrap 的材料引用更改为 mapDiffuse 和 mapDiffuseWrap。您可能还想调整其他属性，例如颜色和镜面反射系数。

至于透明度问题，这有点棘手。您可能想添加一个 alphaTest 属性并为其尝试不同的值，例如0.5。要尝试的另一件事是禁用depthWrite。此外，默认情况下，如果存在法线贴图，three.js 会使用特殊的法线贴图着色器。您可能首先尝试不使用法线贴图，因为根据我的经验，该着色器维护不善且容易损坏。就我个人而言，我也将常规 Phong 材质用于法线贴图，因为它也有支持。