3

In a Three.js project I'm trying to apply a transparent PNG as a texture with a multiply blending

piano_scritta.material = new THREE.MeshPhongMaterial( { transparent:true,  side:THREE.DoubleSide, map: new THREE.ImageUtils.loadTexture( src ) });
piano_scritta.material.blending = THREE.MultiplyBlending;

The transparent parts of the image appear white with a strange effect around the borders. How can I get the PNG to stay transparent in MultiplyBlending mode? Here you can see an example: http://www.alea.pro/img/png_bug.png

EDIT: I made a change and got a very strange result, assigning opacity:0 to the material I got this https://www.alea.pro/img/png_bug2.png

The black part of the PNG disappears as expected but the transparent part remains white!

Aleapro
  • 31
  • 1
  • 3
  • 1
    I would recommend using `ShaderMaterial` when dealing with transparency. Take a look at this: http://stackoverflow.com/questions/16287547/multiple-transparent-textures-on-the-same-mesh-face-in-three-js/16897178#16897178 – Abstract Algorithm Dec 12 '13 at 22:57
  • I have done many tests before asking, ShaderMaterial works for transparency but has a lot of other issues, I can't deal with envMap or reflectivity of the base material. Furthermore, it's a big project with a ton of textures and models changing on runtime and it's all based on standard materials so modifying the structure of the project is a big deal. – Aleapro Dec 13 '13 at 07:56

0 Answers0