AlphaMap producing transparency on random areas

Questions
, , ,
1

Here is the UV map:

image
image916×438 45.8 KB

Here is the result:
image

So yes, it does make the correct part transparent. But it also makes random blocks around the texture transparent. Why would it do this?
(here is the alpha map file by the way)

shirt_alpha
shirt_alpha585×559 246 Bytes

2

What tools are you using for this project?

3

what exactly do you mean?

4

Where did you get the textures, how did you import export things….it matters where you get your things

5

This is a common effect of render order with transparent surfaces – it is very important to separate the opaque and transparent parts of your scene into separate objects and separate materials as much as possible. Setting .transparent = true on a fully-opaque object will cause similar problems.

If your alpha map is always 100% or 0% and never in between (as appears to be true above) then try using .alphaTest = 0.5 (or similar) instead of .transparent = true.

In some cases, using .alphaHash = true (or similar) may be a useful alternative to .transparent = true as well. It avoids the sorting issues and supports semi-transparency between 0–100%, but introduces some grain to the transparency. See the alpha hash example to see what that looks like.

6

I made the textures and models, and the objects are loaded with OBJ Loader

// ADD LEFT ARM
objLoader.load( 
    "../../assets/left_arm.obj",
    function (geometry) {
      geometry.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.material.color.setHex(0x<?php echo $color; ?>);
        }
      });
      geometry.position.x = 1.5;
      geometry.rotation.y = 3.14159;
      scene.add(geometry);
});

// ADD LEFT ARM SHIRT  
objLoader.load( 
    "../../assets/left_arm.obj",
    function (geometry) {
      var textureLoader = new THREE.TextureLoader();
      var texture = textureLoader.load('../../assets/shirt_template.png?1');
      var shirt_alpha = textureLoader.load('../../assets/shirt_alpha.png?1');
      var material = new THREE.MeshLambertMaterial({
        alphaMap: shirt_alpha,
        alphaTest: 0.5,
        transparent: true,
        map: texture,
      });
      texture.minFilter = THREE.LinearFilter;
      texture.wrapS = texture.wrapT = THREE.ClampToEdgeWrapping;
      geometry.traverse(function (child) {
        if (child instanceof THREE.Mesh) {
          child.material = material; 
        }
      });
      geometry.position.x = 1.5;
      geometry.rotation.y = 3.14159;
      geometry.scale.set(1.0002,1.0002,1.0002);
      scene.add(geometry);
});