Three.js material transparency doesn't work as expected

Question

I am trying to create a "tree" from crossed planes, each has texture from png with transparency. And it looks like a part of meshes always lack transparency.

Here is an example: https://jsfiddle.net/tncku896/5/

let camera, scene, renderer;
let group;

init();
animate();

function init() {
    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.z = 1.5;
    scene = new THREE.Scene();
    scene.background = new THREE.Color(0xbbbbbb);
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);
    
    let loader = new THREE.TextureLoader();
    let texture = loader.load('https://i.imgur.com/QxFQi1G.png');
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.NearestFilter;
    let geometry = new THREE.PlaneBufferGeometry(83/100, 139/100);
    let material = new THREE.MeshBasicMaterial({
        map: texture,
        side: THREE.DoubleSide,
        transparent: true
    });
    
    group = new THREE.Group();
    
    let planes = 2;
    for (let i = 0; i < planes; i++) {
        let mesh = new THREE.Mesh(geometry, material);
        mesh.rotation.y = (Math.PI / planes) * i;
        group.add(mesh);
    }
    
    scene.add(group);
}

function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
    
    group.rotation.y += 0.005;
}

Mugen87 · Accepted Answer · 2020-10-24 15:31:13Z

5

You will receive better results if you make the tree opaque and configure alphaTest instead in order to produce an alpha cutout.

let camera, scene, renderer;
let group;

init();
animate();

function init() {
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.1, 100);
  camera.position.z = 1.5;
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xbbbbbb);
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  let loader = new THREE.TextureLoader();
  let texture = loader.load('https://i.imgur.com/QxFQi1G.png');
  texture.magFilter = THREE.NearestFilter;
  texture.minFilter = THREE.NearestFilter;
  let geometry = new THREE.PlaneBufferGeometry(83 / 100, 139 / 100);
  let material = new THREE.MeshBasicMaterial({
    map: texture,
    side: THREE.DoubleSide,
    alphaTest: 0.5
  });

  group = new THREE.Group();

  let planes = 2;
  for (let i = 0; i < planes; i++) {
    let mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.y = (Math.PI / planes) * i;
    group.add(mesh);
  }

  scene.add(group);
}

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);

  group.rotation.y += 0.005;
}

body {
  margin: 0;
}
canvas {
  display: block;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>

answered Oct 24, 2020 at 15:31

Mugen87

31.2k4 gold badges34 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

regn23 Over a year ago

While I still don't understand why my code isn't working correctly, I've already found out that transparency in WebGL has its quirks. Your method works, thanks.

Collectives™ on Stack Overflow

Three.js material transparency doesn't work as expected

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related