양면 반투명 텍스처 문제

three.js를 사용하여 케이지 모양의 오브젝트를 캔버스에 그려 넣으려고합니다. 그러나 케이지의 짧은면이 잘못되어 잘못된 작업을하고 있습니다. 나는 jsFiddle here을 만들 수 있었다.
앞면과 뒷면은 괜찮습니다. (뒤에서 케이지를 보았을 때, 케이지의 바닥이 여전히 막대 사이에서 보이더라도 뒤쪽 텍스처가 궤도처럼 앞면을 "지우는 것"으로 보이지만) 짧은 쪽은 케이지를 돌고 카메라 앞쪽에 카메라를 배치하면 볼 수 있습니다. 코드는 (고체 회색과 투명 천장입니다 바닥 제외) 케이지의 모든면에서 동일하며입니다 : 내가 잘못 뭐하는 거지양면 반투명 텍스처 문제

var cageTexture = THREE.ImageUtils.loadTexture(/*omitted, see fiddle*/); 
cageTexture.wrapS = THREE.RepeatWrapping; 
cageTexture.wrapT = THREE.RepeatWrapping; 
cageTexture.repeat.set(10, 1); 
var cageFaces = [ 
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({transparent: true, opacity: 0, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color: "gray", side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({transparent: true, map: cageTexture, side: THREE.DoubleSide}) 
]; 
var cage = new THREE.Mesh(
    new THREE.BoxGeometry(2, 1.5, 1), 
    new THREE.MeshFaceMaterial(cageFaces) 
);

? 장면을 중심으로 클릭하고 드래그하여 내가 직면 한 문제에 대한 아이디어를 얻으십시오. 바이올린을 자유롭게 편집하십시오. 미리 감사드립니다.

출처

2014-10-24 Andrea Aloi

원하는 것을 얻기위한 한 가지 방법은 transparent 객체가 정렬 될 때 depthTest를 비활성화하는 것입니다. 정렬은 어느 정도 투명성이있는 개체를 올바르게 렌더링하려고 시도하는 데 사용됩니다. . (여기 sortObjects

에 WebGLRenderer의 문서에서 fiddle

출처

2014-10-24 23:59:26 gaitat

우수하지만, 약간의 결함 여전히 존재 : 그것을 설명하기 위해, 나는 빨간색으로 케이지의 바닥의 색상을 설정하고 Y를 증가했습니다 - 좌표, 그래서 당신은 그것의 아래에서 궤도에 진입 할 수 있습니다 : 막대가 바닥을 통해 보일 것 같습니다! [업데이트 된 피들] (http://jsfiddle.net/axedre/hnrw8qw2/1/) –

예 물론 있습니다. depthTest를 비활성화하십시오. https://github.com/mrdoob/three.js/issues/2476에서 의견을보십시오. – gaitat

양면 반투명 텍스처 문제

답변

관련 문제