Loading an alphaMap into a Material

Hello , Im trying to implement an alphamap with the following code, using grayscale images:

var textureCubeAlpha = new THREE.TextureLoader().load( "assets/texture/.jpg" );


textureCubeAlpha.wrapS = THREE.RepeatWrapping;

textureCubeAlpha.wrapT = THREE.RepeatWrapping;

textureCubeAlpha.repeat.set( 4, 4 );

var geometry = new THREE.BoxGeometry( 1, 1, 1 );

var material = new THREE.MeshPhongMaterial( { color: 0x07fcc3, alphaMap: textureCubeAlpha} );

var cube = new THREE.Mesh( geometry, material );

var light = new THREE.HemisphereLight( 0xffffff, 0x080820, 1 );

var pointlight = new THREE.PointLight( 0xb757e0, 1, 100);

pointlight.power = 1000;

var helper = new THREE.HemisphereLightHelper( light, 5 );

var sphereSize = 1;

var pointLightHelper = new THREE.PointLightHelper( pointlight, sphereSize );

scene.add( pointlight );

pointlight.position.set( 80, 20, 40);

scene.add( light );

var rotateX = 0.005;

var rotateY = 0.005;


scene.add( cube );

However, the map doesn’t load and the image field of the Texture is “undefined”.

Please help, Lucid

The image property will only be set when the texture has actually loaded. If you rewrite your logging, you will see what I mean:

var loader = new THREE.TextureLoader();
loader.load( "assets/texture/.jpg", function( textureCubeAlpha ) {

    console.log( textureCubeAlpha );

) );

Anyway, your code is still correct since you can directly assign a texture object to a material. The only thing you have to change is to set the alphaTest property of your material to a value between 0 and 1. I would start with 0.5 and see how it goes. Here is a complete live demo illustrating this approach:


Hey sadly it doesnt work. It only works for alphaTest 0.0. Also the cube dissapears if i have transparency on, or render with alphaTest 0.1 or above. What could be the issue here?

I also tried it with the linked alphamap, still blank screen…

var textureCubeAlpha = loader.load( ‘assets/texture/alphaMap.jpg’, function (textureCubeAlpha){


var material = new THREE.MeshPhongMaterial( { color: 0x07fcc3, reflectivity: 0.3, shininess: 10, transparent: true, opacity: 0.8, side: THREE.DoubleSide} );

}, function ( xhr ) {

console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );

},function ( xhr ) {

console.log( 'An error happened' );


Using this i get “an error happened”

Please try to modify the live example in order to demonstrate the issue. Or try to share a demo as a github repository. It seems it’s not possible to see the error in your code.

Did you try to load a local file with the current threejs version yourself maybe? thats the only difference in the livedemo…

It works if i load the texture from a website… why?