Three.js：将阴影投射到网页上

Question

是否可以在three.js中创建透明/不可见的平面，它可以接收阴影？我的目标是在没有背景的3d画布上绘制一些对象（所以我可以在canvas元素后面看到网页）。我希望对象在背景上投射阴影，我想，如果我能制作一个隐形飞机，那么网页背景仍然可见。阴影在平面上投射，看起来阴影在网页上。 现在我可以制作一个不透明度为0.5（或类似）的白色平面，但这样平面就可见了。理想情况下，平面应该是完全不可见的（阴影除外）。

编辑：我创建了一个示例（基于this）：http://jsfiddle.net/s5YGu/2/

这里我有不透明度0.5，但你可以看到飞机。如果我将不透明度设置为0，则整个平面和阴影消失。

Answer 1

我通过黑客攻击基本着色器来完成这项工作，这里有着色器代码http://pastie.org/5088640

AFAIK没有缺点，如不透明度：0.1

Answer 2

是的，你可以达到你想要的效果，至少在我的机器上看起来相当不错。 ： - ）

这是一个小提琴：http://jsfiddle.net/ZXdV3/25/

有几个问题。首先，您必须在渲染器构造函数args中设置alpha: true。

其次，虽然我认为你希望飞机完全透明，但你必须选择material.opacity = 0.1左右。

第三，如果您在网页上放置画布，并且您希望网页是交互式的，那么您将不得不在画布中禁止指针事件（我不确定IE是否支持此功能） ：container.style.pointerEvents = 'none';

three.js r.67