0

我正在尝试在 WebGLRenderer 的 PhongMaterial 中为 THREE.SpotLight 实现轻质 cookie（或图案图案、轻质纹理或轻质遮罩）。目的是能够为灯光附加纹理，如下所示：http ://www.idjnow.com/ProductImagesLarge/GOBO-GLASS1C.jpg纹理会降低灯光的强度，产生类似阴影的效果投影。

我想我已经涵盖了“将纹理附加到灯光并将其作为制服传递以在着色器中查找”，尽管无法对其进行测试，因为我在计算我在聚光灯锥体/聚光灯中的位置时遇到了问题。

我看到这里计算了聚光灯的光贡献（我直接修改 Three.js 源，而不是创建自己的材质）：

https://github.com/mrdoob/three.js/blob/master/src/renderers/WebGLShaders.js#L1013

聚光灯的位置是一个圆圈，对吧？或椭圆，如果它在一个角度。所以我需要在这里添加一些代码，它会告诉我我在聚光灯下的位置（xy 坐标）。我可以在纹理查找上映射这些坐标，相应地降低 spotDiffuse，并希望有工作的图案投影。

我如何计算与每盏灯相关的这些坐标？

或者有没有更好的方法在 Three.js 中实现光饼干/图案/光纹理/光蒙版？我看到它是游戏引擎中的一个流行功能，如果有这样的内置功能会很好。http://docs.unity3d.com/Documentation/Components/class-Light.html很好地描述了我正在寻找的内容（cookie 部分）。

4

1 回答 1

6

看看这里：http ://www.evpopov.com/threejstest/test_spot_projtexture.html

我认为它正在做你想做的事。

它实际上是标准的投影纹理，除了纹理不是“按原样”使用而是衰减照明计算。

对于这个示例，我使用了投影纹理的 Alpha 通道作为衰减因子。

为了创建我使用的顶点/片段着色器，我从 phong 材质中获取了顶点/片段着色器，并且只保留了聚光灯渲染的相关部分。我还设置了一个恒定的环境颜色以避免出现黑色区域​​（在斑点范围之外）。

投影纹理的特定代码在顶点/片段着色器中具有以 // 开头的注释，如果您想在自己的着色器中重用它。

您还必须生成与您的灯光相对应的投影矩阵：该makeProjectiveMatrixForLight函数为您完成 => 它与您在三个用于阴影映射的 JS 源代码中找到的代码几乎相同。

启动示例时，墙壁旋转，聚光灯保持固定。moveLightTarget您可以通过更改为来使聚光灯的目标移动true，在这种情况下，您需要设置rotateCube为false以更好地查看正在发生的事情。

于 2013-03-31T17:03:00.140 回答