Question

我正在努力学习three.js所以我的下一个个人挑战是从搅拌机导入一个模型，一切顺利，但一些纹理呈现出一些问题（使用demo链接就可以看到它）。 / p>

此处有一个演示版：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
}],

这是搅拌机中的三个外观：

enter image description here

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

有人可以解释一下我做错了吗？

谢谢：）

Answer 1

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

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

关于透明度问题，它有点棘手。您可能希望添加alphaTest属性并为其尝试不同的值，例如0.5。要尝试的另一件事是禁用depthWrite。此外，默认情况下，如果存在法线贴图，则three.js使用特殊的法线贴图着色器。您可能首先尝试没有普通地图，因为我的经验中的着色器维护得很差并且很容易打破。就个人而言，我也使用普通的Phong材料作为正常的映射事物，因为它也有支持。

Three.js JSONLoader纹理问题

1 个答案: