Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Three js black color of material to transparent

How to make Lambert material from texture with transparent black color without alphaMap.

I have sphere with clouds texture. I need to be black color transparent, if i use blending, it have affect on shadow, i need keep behavior like MeshPhong material, but only with transparent black color.

var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        color: 0xffffff, 
                        map: THREE.ImageUtils.loadTexture( "img/planets/clouds.jpg" ),

                        specular   : new THREE.Color("rgb(255,255,255)"),
                        shininess  : 0.1,                              
                        depthTest  : 0,
                        blending   : 1,
                        transparent: true,
                        bumpScale  : 1, //0.8
                        bumpMap    : THREE.ImageUtils.loadTexture( "img/planets/bump.jpg" ),                                                      
                        } );

what is the correct way, to setup blending, or another attributes?

like image 909
Martin Avatar asked Nov 09 '22 16:11

Martin


1 Answers

Solution for me was to use a alpha map (BW texture where white = less opacity, black = 100% opaque):

var t = THREE.ImageUtils.loadTexture( "clouds.jpg" );
var map = THREE.ImageUtils.loadTexture( "clouds_alpha.jpg" );
var cloudsMaterial = new THREE.MeshLambertMaterial( { 
                        map        : t,
                        alphaMap   : map,
                        blending   : 1,
                        transparent: true,                                                    
})
like image 116
Martin Avatar answered Nov 14 '22 22:11

Martin