Loading an alphaMap into a Material

Questions
#1

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

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

console.log(textureCubeAlpha);

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;

cube.translateX(0.5);

scene.add( cube );

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

Please help, Lucid

#2

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:

https://jsfiddle.net/pq4nas9c/1/

#3

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?

#4

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

#5

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

console.log(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”

#6

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.

#7

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

#8

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