Issues encountered with Three.js MeshBasicMaterial functionality

Question

I am currently working on generating a texture using Three.js.

The texture_f1 source I am using is a .png file, which allows the background to show through.

The issue arises when attempting to set the background color using color: 0xffffff in conjunction with the map: property.

If I only set color: 0xffffff, it displays as white. However, when I use it with map: - like this

var material_f1 = new THREE.MeshBasicMaterial({ map: texture_f1, color: 0xffffff});

- the .png's black background shows through.

Answer 1

Answer №1

If you have a texture with transparency, you need to ensure that the material.transparent property is set to true.

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

Keep in mind that the material color does not directly appear through the transparent texture - instead, it alters the appearance of the texture.

To make the material color show through the transparent texture, you can utilize a ShaderMaterial and create a custom shader.

For an example of how to achieve this, refer to this response on Stack Overflow.

Using three.js version r.71

Answer 2

If you have a texture with transparency, you need to ensure that the material.transparent property is set to true.

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

Keep in mind that the material color does not directly appear through the transparent texture - instead, it alters the appearance of the texture.

To make the material color show through the transparent texture, you can utilize a ShaderMaterial and create a custom shader.

For an example of how to achieve this, refer to this response on Stack Overflow.

Using three.js version r.71