CODEWITHSUNDEEP
javascriptthree.jsmeshtexture-mapping
Dragos Cocos
Dragos Cocos

Reputation: 49

Three.js MeshBasicMaterial doesn't work as expected

I am trying to create a texture with Three.js.

My source of texture_f1 is a .png file witch means you can see the background through it.

The problem is that if i try to set background color: 0xffffff it doesn't work in combination with map:.

If i set only the color:0xffffff , it return a white, but when use with map: like this var material_f1 = new THREE.MeshBasicMaterial({ map: texture_f1, color: 0xffffff}); i can see the background through the .png black .

Upvotes: 2

Views: 5157

Answers (1)

WestLangley
WestLangley

Reputation: 104763

If you have a transparent texture, you must set material.transparent to true.

var material = new THREE.MeshBasicMaterial( {
    color: 0xffffff,
    map: texture,
    transparent: true
} )

Note that the material color does not "show through" the transparent texture -- it tints the texture.

If you want the material color to "show through" the transparent texture, then you need to use ShaderMaterial, instead, and create a custom shader.

There is an example of doing that in this stackoverflow answer.

three.js r.71

Upvotes: 3

Related Questions