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紋理問題

回答

相關問題