CODEWITHSUNDEEP
jsonthree.jstexturesblender
Remo H. Jansen
Remo H. Jansen

Reputation: 24979

Three.js JSONLoader texture issues

I'm trying to learn three.js so my next personal chalenge was to import a model from blender, everything went well but some of the textures are presenting some problems (use demo link to be able to see it).

There is a demo hosted here:https://googledrive.com/host/0BynsKHbZoT73elJpaUxqTlprVjQ/demos/3dworld/

In the js console you can examine the materials, You can also check game.models.tree

The materials exported from 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
}],

This is the look of the three in blender:

enter image description here

As you can see the transparency is gone and the texture in the bark is not mapped correctly.

Can someone please explain me what i'm doing wrong?

Thanks :)

Upvotes: 1

Views: 3130

Answers (1)

Tapio
Tapio

Reputation: 3456

Material exporting is fragile as there isn't always a clear mapping between Blender and Three.js parameters. As such, the exported materials frequently need fixing by hand.

In this case, the exporter has incorrectly guessed Tree_Bark_Tiled.png is a light map instead of a diffuse map. To fix this, change all the material references to mapLight and mapLightWrap to mapDiffuse and mapDiffuseWrap. You might also want to tweak the other properties, such as the colors and specular coefficient.

As to the transparency issue, it's a bit trickier. You probably want to add an alphaTest property and try different values for it, e.g. 0.5. Another thing to try is disabling depthWrite. Also, by default, three.js uses a special normal mapping shader if there's a normal map present. You might at first try without normal maps as that shader in my experience is poorly maintained and breaks easily. Personally I use the regular Phong material also for normal mapped things as it too has the support.

Upvotes: 3

Related Questions