如何在three.js中使用cookie实现投影仪？

这是我在Unity5中能够相对轻松地工作的一种效果，我想知道如何在three.js中做同样的事情

基本上，我把一个特定的形状（小行星船或三角形）投射到一个曲面上。主要技术是在投影仪灯光和屏幕之间插入所谓的“cookie”（技术术语是），从而将该形状投影到（通常是弯曲的）表面上

一张图片抵得上千言万语，下面是unity 5中场景的屏幕打印：

我只是想找一些关于从哪里开始的一般指导方针，而不是详细的描述。例如，我看到投影仪和光线投射器。这两种方法都有效吗？不幸的是，“cookie”这个词还有很多其他的含义，所以我在搜索“three js cookie”时找不到任何相关的参考资料

cookie本身被视为统一的纹理，如下屏幕打印所示：

如有任何建议，将不胜感激

---

非常感谢。

虽然我一直不知道如何在three.js中使用cookies，但我最终还是用three.js找到了一个更好的解决方案。通常，此方法不会取代cookie的使用，但如果尝试使用cookie将形状投影到不规则形状的目标曲面上，则可以将投影场景渲染到屏幕外缓冲区，然后将其作为动态纹理应用到目标对象的曲面上

下面是一个屏幕截图，展示了我所做的：

在底部，我显示了渲染源场景的屏幕外缓冲区的内容（您不必显示此缓冲区，我只是出于演示目的显示它）。这只是一个平面。我以简单的线性方式在场景中移动对象，不必考虑目标几何体的曲率。你基本上可以把它想象成“包装纸”

然后将此缓冲区指定为目标对象的纹理，在本例中，目标对象是屏幕上部的绿色圆柱体：

this.cylMaterial = new THREE.MeshBasicMaterial()

this.bufferGamePlaneTexture = new THREE.WebGLRenderTarget(
    window.innerWidth,
    window.innerHeight,
    {minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter} 
)
...
this.cylMaterial.map = this.bufferGamePlaneTexture.texture

var projCylGeom = new THREE.CylinderGeometry(3, 3, 12, 50)

this.projCyl = new THREE.Mesh(projCylGeom, this.cylMaterial)
...
//render to offscreen buffer in your animation loop
bufferRenderer.render(
  this.bufferGamePlaneScene,
  this.bufferSceneCamera,
  this.bufferGamePlaneTexture
)

正如您所看到的，源形状最终会成型，以根据需要拟合目标几何体和曲线，就像形状直接绘制在目标曲面上一样

---

实际上，您正在使用先前生成的自定义生成的“礼品包装纸”包装目标对象。游戏引擎负责所有必要的转换，因此您可以使用简单的“线性”语义渲染源场景，与目标几何体无关。这还允许您轻松地将其应用于不同的曲面（例如球体），而无需对源场景逻辑进行任何更改。

虽然我一直无法了解如何使用cookies with three.js，但我最终还是用three.js找到了一个更好的解决方案。通常，此方法不会取代cookie的使用，但如果尝试使用cookie将形状投影到不规则形状的目标曲面上，则可以将投影场景渲染到屏幕外缓冲区，然后将其作为动态纹理应用到目标对象的曲面上

下面是一个屏幕截图，展示了我所做的：

在底部，我显示了渲染源场景的屏幕外缓冲区的内容（您不必显示此缓冲区，我只是出于演示目的显示它）。这只是一个平面。我以简单的线性方式在场景中移动对象，不必考虑目标几何体的曲率。你基本上可以把它想象成“包装纸”

然后将此缓冲区指定为目标对象的纹理，在本例中，目标对象是屏幕上部的绿色圆柱体：

this.cylMaterial = new THREE.MeshBasicMaterial()

this.bufferGamePlaneTexture = new THREE.WebGLRenderTarget(
    window.innerWidth,
    window.innerHeight,
    {minFilter: THREE.LinearFilter, magFilter: THREE.NearestFilter} 
)
...
this.cylMaterial.map = this.bufferGamePlaneTexture.texture

var projCylGeom = new THREE.CylinderGeometry(3, 3, 12, 50)

this.projCyl = new THREE.Mesh(projCylGeom, this.cylMaterial)
...
//render to offscreen buffer in your animation loop
bufferRenderer.render(
  this.bufferGamePlaneScene,
  this.bufferSceneCamera,
  this.bufferGamePlaneTexture
)

正如您所看到的，源形状最终会成型，以根据需要拟合目标几何体和曲线，就像形状直接绘制在目标曲面上一样

---

实际上，您正在使用先前生成的自定义生成的“礼品包装纸”包装目标对象。游戏引擎负责所有必要的转换，因此您可以使用简单的“线性”语义渲染源场景，与目标几何体无关。这还允许您轻松地将其应用于不同的曲面（例如球体），而无需对源场景逻辑进行任何更改。

看起来官方术语是“投影纹理”或“投影纹理映射”。看起来官方术语是“投影纹理”或“投影纹理映射”。