How to implement a projector with a cookie in three.js? - three.js

Question

This is an effect I was able to get working relatively easy in Unity5, and I'm wondering how I could go about doing the same thing in three.js.
Bascially, I am projecting a particular shape (an "asteroids ship" or triangle) onto a curved surface. The main technique is you insert what's called a "cookie" (technical term is cucoloris) between the projector light and the screen and thus project that shape onto the (typically curved) surface.
A picture is worth a thousand words, so here's a screen print of the scene from unity 5:
I'm just looking for some general guidelines on where to start, not a detailed description. For instance, I see Projector and RayCaster. Would either of these work? Unfortunately, the term "cookie" is overloaded with other meanings, so I can't find any relevant references on searches for "three js cookie".
The cookie itself is regarded as a texture in Unity, as the following screen print shows:
Any advice would be greatly appreciated.
Many Thanks.

Answer 1

While I was never able to figure out how to use cookies with three.js, I ultimately came up with a much better solution using off-screen rendering. This method does not replace the usage of cookies in general, but if you're attempting to use a cookie to project a shape onto an irregularly shaped target surface, then you can instead render your projection scene to an off-screen buffer, and then apply that to the surface of the target object as a dynamic texture.
Here's a screen shot demonstrating what I did:
At the bottom, I am showing the contents of the offscreen buffer where I render the source scene (you do not have to display this buffer, I'm just showing it for illustration purposes). It's simply a flat plane. I move the objects about on that the scene in a simple linear fashion, not having to account for the curvature of the target geometry. You can basically think of this as "wrapping paper".
Then you assign this buffer as a texture to the target object, which in this case is the green cylinder in the upper portion of the screen:
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
)
As you can see, the source shapes end up as molded to fit the target geometry and curves as necessary, just as if the the shapes were directly drawn on the target surface.
In effect, you're wrapping your target object with the custom-generated "gift wrapping paper" you generated earlier. The game engine takes care of all the necessary transformations, so you can render your source scene with simple "linear" semantics, independent of the target geometry. This also allows you to easily apply it to a different surfaces (e.g. a sphere) without having to make any changes to source scene logic.