THREE.TextureProjector / THREE.ProjectionMaterial? Project texture onto geometry from a camera

[flimshaw]

Hey there,

I started messing with this feature last night, I wanted to see if there was already something along these lines before I go further, or see if this was the best way to go about it. Here is a real rough demo: http://charliehoey.com/threejs-demos/projector-demo.html

I want to have an image/video that is projected onto a mesh dynamically. To do it, I'm using a Projector to convert vertex coordinates to screen coordinates (ie: what part of the texture is hitting that vertex), then converting that to UV coordinates for the texture, and then applying those UV coordinates to the geometry each frame. It seems to kind of work, except that the angles seem off on one of the floor triangles, not sure what's going on there yet.

Any thoughts? Think this is the right way to go about this sort of thing? If I could get shadows/directional occlusion working someday too, that'd be pretty cool. Someday maybe :)

[mrdoob]

I think @arodic has experience with this already :)

[WestLangley]

I see that this post has been considered to be an enhancement request to add projective texturing to three.js.

For reference, there is an example of projective texturing in this stackoverflow post, including a live demo.

[flimshaw]

Thanks a lot, that's perfect, much better way of doing it. I just hacked on it for a bit and now have it projecting a video texture onto a bunch of cubes! I'll clean it up and post it in a fiddle or something.

Second question: how would I go about making a spotlight that projects a square? What's the easiest approach? I did some googling and looked through a bit of the source, but it's not immediately apparent to me where the circular part of the spotlight is coming in.

[mrdoob]

how would I go about making a spotlight that projects a square? What's the easiest approach? I did some googling and looked through a bit of the source, but it's not immediately apparent to me where the circular part of the spotlight is coming in.

I would say it's in the shader. Have a look at PR #5080.

[flimshaw]

Thanks, noted! I'll take a look. Feel free to close this out if it doesn't seem like a good enhancement at the moment, I'll chime back in if I get it to a good spot :)

[mrdoob]

Great!

[WestLangley]

Feel free to close this out if it doesn't seem like a good enhancement at the moment

@flimshaw Adding projective texturing to three.js would be an excellent enhancement !

how would I go about making a spotlight that projects a square?

You would add a mask to the spotlight. An alphaMask would block the light where alpha was 1; a colorMask would tint the light. Spotlights currently do not support masks.

[yokotsumo]

I have a specific need. I would like to use a mesh with an existing map, project an image on it and update the original texture with the projected image (keeping the original UVs of course). Is there a way to do this?

[WestLangley]

@yokotsumo Your best bet for getting help is on stakoverflow, where you have previously posted your question.

As stated in the guidelines, help requests should be directed to stackoverflow. This board is for bugs and feature requests.

[yokotsumo]

This could be a nice feature of Three.js