Texture Projection

Hi, community!

I was curious about how to project a texture, for example, on a plane, like a video projector does.
As usual, I’ve invented my own bicycle from the scratch with THREE.ShaderMaterial() and 5 vertices. (Robot Bender.jpg) :smile:


This is a very rought concept, but it’s working as expected. Maybe somebody has/knows about a better approach. If so, I’d like to look at it (if it’s not classified top-secret :wink: )

From my point of view, this solution can be used in these forum threads:


Related: https://github.com/mrdoob/three.js/pull/13057

1 Like


Thanks for the link, Michael.
During creation of the fiddle, I have a thought, that it would be cool to have a type of a light source (a separated one or extension of an existing one), which works like a real video projector, using a texture.

1 Like

Thats very good, i’ve been waiting for more projector like features to become available, definitely a step in the right direction.

Reworked Example

I’ve updated the original example to use projector’s pre-computed viewMatrix and projectionMatrix. It might help people understand what’s happening inside the shader without having to understand each step of the projection.

It’s also 30% more performant on my machine.


@prisoner849 @sciecode

Great examples. I’m trying to achieve projection mapping, and this is working fantastic. However I’d like the initial projection to ‘stick’ to the meshes. This illustrates the concept, see the 2nd slide: https://www.instagram.com/p/B2b71Z1i73o/

See my fiddle here: http://jsfiddle.net/gcpuj1zk/5/. Basically, as screen moves, the image should distort, not keep the projection. Any idea, or point in the right direction, how I can achieve this? Much appreciated it.

Just don’t move the projector?

1 Like

The projector is already not moving. So, while the object is moving, the projected image remains the same.

My goal is to have the INITIAL projected image ‘painted’ onto the object, so as the object is rotated/moved, the texture moves with it.

Then you can attach the projector (or a copy thereof) to the object that you want to rotate. :wink:

Would it be possible to dynamically merge this projection method into the standard shader using onBeforeCompile?

Could you explain what you mean with this?

From what i can find, people are using the OnBeforeCompile method to modify shaders at run-time. just trying to determine a way to use this projection method with the already very featured Standard Material.

Thanks a lot for your code. I updated the code to three.js 121 (ES module + replace GLSL texture2d by texture) in an Observable notebook : https://observablehq.com/@severo/texture-projection