CODEWITHSUNDEEP
three.js
regn23
regn23

Reputation: 153

Three.js material transparency doesn't work as expected

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;
}

Upvotes: 5

Views: 1727

Answers (1)

Mugen87
Mugen87

Reputation: 31076

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>

Upvotes: 5

Related Questions