Three.js JSONLoader纹理问题

Question

我正在尝试学习three.js，所以我的下一个个人挑战是从blender导入一个模型，一切都很顺利，但一些纹理出现了一些问题(使用演示链接可以看到它)。

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

在js控制台，您可以查看资料，也可以查看game.models.tree

从blender导出的材质：

    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
}],

这是blender中的三个外观：

​

​

正如你所看到的，透明度消失了，树皮中的纹理没有正确映射。

有人能给我解释一下我哪里做错了吗？

谢谢:)

Answer 1

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

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

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