Plane material with png alpha transparency from json export mesh is not working

Question

Im making something like a underground parking in three.js I've made it in blender and render is ok. The problem is in the floor =)

I have 2 different textures:

• diffuse texture jpg without transparency (aphalt)
• diffuse texture png with alpha (only parking markings like exit with arrows, parking line, etc)

So i've exported mesh from blender and i'm having these material settings:

{
    "DbgColor" : 15658734,
    "DbgIndex" : 0,
    "DbgName" : "wire_006135006.002",
    "blending" : "AdditiveBlending",
    "depthTest" : true,
    "depthWrite" : false,
    "colorAmbient" : [1.0, 1.0, 1.0],
    "colorDiffuse" : [1.0, 1.0, 1.0],
    "colorSpecular" : [0.5, 0.5, 0.5],
    "mapDiffuse" : "test.png",
    "mapDiffuseWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "alphaTest" : 0.5,
    "opacity" : 0.5,
    "transparency" : 0.5,
    "transparent" : true,
    "vertexColors" : false
},

{
        "DbgColor" : 15597568,
    "DbgIndex" : 1,
    "DbgName" : "wire_006135006.001",
    "blending" : "NormalBlending",
    "colorAmbient" : [0.6839832884666812, 0.6807164770471523, 0.6709177117186442],
    "colorDiffuse" : [0.6839832884666812, 0.6807164770471523, 0.6709177117186442],
    "colorSpecular" : [0.0, 0.0, 0.0],
    "depthTest" : true,
    "depthWrite" : true,
    "mapBump" : "asfalt_specular.jpg",
    "mapBumpWrap" : ["repeat", "repeat"],
    "mapDiffuse" : "floor_2.jpg",
    "mapDiffuseWrap" : ["repeat", "repeat"],
    "shading" : "Phong",
    "specularCoef" : 1,
    "transparency" : 1.0,
    "transparent" : false,
        "vertexColors" : false
},

Here for the 1st material i've already change next properties:

1. "transparet" : true,
2. "alphaTest" : 0.5,
3. "transparency" : 0.5,
4. "depthWrite" : false,

So i dont get, wtf is my png with alpha is not displaying...

There is only a black texture or transparent, but i can not see white markings.

Please, help me, how to set my png alpha transparency? i've tried a lot of exaples and have no luck (

Answer 1

the problem was in the image that I used as a texture. The original image had the following dimensions: 1999 × 7141. Apparently, for some unknown reason three.js can't use such a great texture. i've reduced the size to 1000 × 3572, and its ok now.