HTML5 Three.js r81 阴影在相机旋转期间丢失 alpha 贴图答案

【问题标题】：HTML5 Three.js r81 shadows lose alpha map during camera rotationHTML5 Three.js r81 阴影在相机旋转期间丢失 alpha 贴图
【发布时间】：2017-02-04 11:20:36
【问题描述】：

使用 Three.JS r81 我遇到了一个问题，即使用自定义深度着色器通过透明材质投射阴影。当我的场景中只有一棵树时，阴影看起来很棒。第二个我添加到右侧大约 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 中的影子系统在过去一年中发生了一些变化，但不确定是我的问题还是库中可能存在的错误。有什么想法吗？

【问题讨论】：

标签： javascript three.js shadows

【解决方案1】：

看来这一切都是因为我犯了一个愚蠢的错误。我的着色器材质制服使用的是mesh.material 而不是mesh.material.map。改了之后就正常了。

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

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

【讨论】：