three.js blend color with map

Question

I have a mesh that has map and color. I want to set the transparent part in the map to be the color. I tried this but only map is render.

var map = THREE.ImageUtils.loadTexture(url);
var material = new THREE.MeshPhongMaterial({
     color: colors[Math.ceil(Math.random() * (colors.length - 1))],
     transparent: true,
     opacity: 1.0,
     map: map,
     blending: THREE.NormalBlending
});
target.mesh = new THREE.Mesh(
     new THREE.CubeGeometry(target.size.x, target.size.y, target.size.z), 
     material);

Check this post. I asked it a couple of weeks back (on my other account) It worked for me. http://stackoverflow.com/questions/13678523 — 2pha, Dec 18 '12 at 09:41
@2pha Thanks. It seems quite complicated... Does it use shader? — Ovilia, Dec 19 '12 at 02:58
You can just copy and paste the the code in the answer. It basically changes the way the phong material works and will affect all phong materials. — 2pha, Dec 19 '12 at 07:08

score 0 · Answer 1 · answered Dec 20 '12 at 04:18

Ovilia, the reference from 2pha will probably handle what you need. It's imperfect, since it changes the behavior of a standard built-in THREE shader -- if you eed to mix-and-match the standard "phong" behavior with the modified decal behavior, then it might cause problems. Only you can decide! An alternative would be to specify a custom shader instead, but that's a (little) more work.

three.js blend color with map

1 Answers1