HTML5 Three.js r81シャドーがカメラの回転中にアルファマップを失う

Question

Three.JS r81で作業するシャドウが透明な素材にカスタムシェイプシェーダーでキャストされている問題があります。私は自分のシーンに木だけがあると、影が大きく見えます。 2番目はシンプルなボックスに約100単位を右側に追加します。シャドウは透明な素材を透明にして、その素材をキャストします。ボックスの影を消しても効果はありません。

Here's how the shadows should look

Here's what happens when I add a box

私は近い木にボックスを移動する場合、興味深いことに、影が自分自身を修正するように見えます。また、私は軌道カメラを使用しており、シーンの周りを回転すると、ツリーの周りを回転するときに、シャドウが良いものから悪いものに前後にシフトします。

私の光はかなり基本的な設定されている：

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のシャドウシステムが過去1年間でちょっと変わったと知っていますが、それが私かライブラリのバグかどうかはわかりませんでした。何か案は？

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