我正在尝试在WebGLRenderer中的PhongMaterial中为THREE.SpotLight实现光饼干（或图案或光纹理或光线蒙版）。目的是能够为光附加纹理，如下所示：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很好地描述了我正在寻找的东西（饼干部分）。
答案 0 :(得分：6)
看看这里：http://www.evpopov.com/threejstest/test_spot_projtexture.html
我认为它正在做你想要的。
实际上是标准的投影纹理，除了纹理不是“按原样”使用，而是减弱了光照计算。
对于这个样本，我使用了投影纹理的alpha通道作为衰减因子。
为了创建我使用的顶点/片段着色器，我从phong材质中获取了顶点/片段着色器，并仅保留了相应的部分用于聚光灯渲染。我还设置了恒定的环境颜色，以避免出现黑色区域（在光斑范围之外）。
如果您想在自己的着色器中重复使用投影纹理的特定代码，则在顶点/片段着色器中以//开头的注释。
您还必须生成与您的灯光对应的投影矩阵：makeProjectiveMatrixForLight函数为您执行此操作=＆gt;它与三个用于阴影贴图的JS源代码中的代码几乎相同。
启动示例时，墙壁旋转，聚光灯保持固定。您可以通过将moveLightTarget更改为true来使聚光灯的目标移动，在这种情况下，您可以将rotateCube设置为false以更好地了解正在发生的事情
