HTML5 Three.js r81 그림자가 카메라 회전 중에 알파 맵을 잃습니다.

Question

Three.JS r81과 함께 작업 사용자 정의 쉐이더가있는 투명한 재질로 그림자를 드리 우는 데 문제가 있습니다. 내 장면에 나무가있을 때 그림자가 멋지다. 두 번째는 오른쪽 상자에 약 100 개의 간단한 상자를 추가하고 그림자는 투명한 재질에서 투명한 재질을 모두 잃게됩니다. 상자의 그림자를 끄면 효과가 없습니다. 내가 가까이 트리에있는 상자를 이동하는 경우

Here's what happens when I add a box

Here's how the shadows should look

흥미롭게도, 그림자 자체를 해결하는 것. 또한, 나는 궤도 카메라를 사용하고 있으며, 나무 주위를 돌면서 씬 주위를 돌리면 그림자가 좋게 나갈 수 있습니다.

내 빛은 아주 기본적인 설정 :

var directionalLight = new THREE.DirectionalLight(0xffffff, 1); 
directionalLight.position.set(120, 120, 120); 

directionalLight.castShadow = true; 
directionalLight.shadow.camera.right = 250; 
directionalLight.shadow.camera.left = -250; 
directionalLight.shadow.camera.top = 250; 
directionalLight.shadow.camera.bottom = -250; 
directionalLight.shadow.camera.far = 300; 
directionalLight.target.position.x = 80; 

directionalLight.shadow.mapSize.width = directionalLight.shadow.mapSize.height = 1024; 
directionalLight.shadow.bias = -0.0003; 
directionalLight.shadow.camera.scale.x = 0.25; 
directionalLight.shadow.camera.scale.y = 0.25; 

scene.add(directionalLight); 

은 나는 거의 모든 빛 그림자 설정의 값과 아무것도 긍정적 인 영향을하지 않습니다 엉망했습니다.

Three.js의 그림자 시스템이 작년에 조금 바뀌었지만 라이브러리에있을 수있는 버그인지 확실하지 않았습니다. 어떤 아이디어?

Answer 1

내 모든 부분에서 바보 같은 실수로 인한 것 같습니다. 셰이더 재질 유니폼은 mesh.material.map 대신 mesh.material을 사용했습니다. 그것을 바꾼 후에, 그것은 잘 작동합니다.

var uniforms = { texture: { type: "t", value: mesh.material.map } } 

shaderLibrary[libraryName] = new THREE.ShaderMaterial({ 
          uniforms: uniforms, 
          vertexShader: vertexShader, 
          fragmentShader: fragmentShader, 
         });