Three.js - 스프라이트를 숨기는 투명한 비행기

Question

장면에 텍스트 - 스피리트를 추가 할 때 투명 비행기가 스프라이트를 숨기지 만 어떤 3D 오브젝트도 숨기지 않았습니다. 왜 이렇게하고 투명한 비행기 아래에서 스프라이트를 표시 할 수 있습니까?

// transparent plane 
geometry = new THREE.PlaneGeometry(200, 200, 200); 
material = new THREE.MeshBasicMaterial({ 
      color: 0xa6cfe2, 
      side: THREE.DoubleSide, 
      transparent: true, 
      opacity: 0.5, 
      depthFunc: THREE.LessDepth, 
     }); 

그러나 더 작업 선을 보인다 :

PNG example click here

내 비행기가 찾으십시오. 그래서, examle에 대해 내가 문제를 알아 내기 위해, 바이올린에 대한 몇 가지 코드를 작성 : look fidddle example

Answer 1

three.js를 한 다음, 제 1 투명 객체, 그리고 마지막으로 스프라이트를 불투명 한 물체를 렌더링합니다. 스프라이트는 다른 오브젝트와 마찬가지로 깊이 버퍼의 영향을받습니다.

// transparent plane 
geometry = new THREE.PlaneGeometry(200, 200, 1, 1); 

material = new THREE.MeshBasicMaterial({ 
    color: 0xa6cfe2, 
    side: THREE.DoubleSide, 
    transparent: true, 
    opacity: 0.5, 
    depthWrite: false 
}); 

업데이트 바이올린 :

당신은 깊이 버퍼에 쓰기에서 투명 오브젝트를 방지하기 위해이 패턴을 사용할 수 있습니다 https://jsfiddle.net/vyLc6roq/2/

three.js를 r.84