Three.js JSONLoader纹理问题

我想学习three.js，所以我的下一个个人chalenge是从搅拌机导入模型，一切都很顺利，但一些纹理呈现一些问题（使用演示链接能够看见了）。Three.js JSONLoader纹理问题

这里有一个演示托管在这里：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

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

有人可以请解释我做错了什么？

谢谢:)

来源

2013-04-16 Remo H. Jansen

材料出口是脆弱的，因为没有永远搅拌机和three.js所参数之间存在明确的映射。因此，出口的材料通常需要手工修理。

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

至于透明度问题，这有点棘手。您可能需要添加alphaTest属性并为其尝试不同的值，例如0.5。另一个要尝试的是禁用depthWrite。此外，默认情况下，如果存在正常映射，three.js将使用特殊的法线贴图着色器。你可能首先尝试没有正常的地图，因为我的经验中的着色器维护不好，容易中断。就我个人而言，我也使用普通的Phong材料来绘制正常的地图，因为它也有支持。

来源

2013-04-18 06:58:40 Tapio

感谢您的评论我会尽快尝试它，只要我到家。我期待看到一棵树很好:) –

在家试过了，现在我有一棵很漂亮的树，非常感谢你的建议:) –

Three.js JSONLoader纹理问题

回答

相关问题