Three.js blend envmap with semi transparent texture

0
votes

I have a plane with a MeshBasicMaterial and a cubecamera. I assign the cubecamera.renderTarget as an envmap to my material and a png image as a texture for my material. The png image is pransparent execept the center of it. What I would like to accomplish is to have the reflection - cubecamera envmap be visible only where the png is transparent.

Is this possible? and if so please guide me through because I'm new with three.js. Currently my material looks like this:

productMaterial = new THREE.MeshBasicMaterial( {
    map: productModelTexture,
    envMap: that.cubeCamera.renderTarget,
    combine: THREE.MixOperation,
    reflectivity: 0.25,
    color: that.models.settings.color,
    specular: that.models.settings.specular,
    side: THREE.FrontSide,
    transparent: true,
    fog: false
} );
1
three.js

1 Answers

0
votes

Instead of having a transparent PNG, you should export your transparency alpha to its own image map, and use the alphaMap property of materials to set your transparency.

http://threejs.org/docs/#Reference/Materials/MeshPhongMaterial