Three.js：在网页上投射阴影答案

【问题标题】：Three.js: Casting a Shadow onto a WebpageThree.js：在网页上投射阴影
【发布时间】：2012-10-13 20:47:55
【问题描述】：

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

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

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

【问题讨论】：

标签： three.js

【解决方案1】：

我通过修改基本着色器来完成这项工作，这里是工作着色器代码http://pastie.org/5088640

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

【讨论】：

【解决方案2】：

是的，你可以达到你想要的效果，至少在我的机器上看起来还不错。 :-)

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

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

其次，虽然我假设你希望飞机完全透明，但你必须满足于material.opacity = 0.1，或者这样。

第三，如果你在网页上放置一个画布，并且你希望网页是交互式的，你将不得不抑制画布中的指针事件（虽然我不确定 IE 是否支持这个） :container.style.pointerEvents = 'none';

three.js r.67

【讨论】：