Projecting texture onto mesh and applying result to mesh texture (for mesh painting)

You can use a CanvasTexture with a second material layered over the main material (Update the geometry.groups to ensure both materials work correctly). On pointerdown, use a Raycaster to get the UV coordinates of the intersection. Convert the UV coordinates to canvas pixel positions, draw on the canvas at those positions, and update the CanvasTexture.

Here is a working demo to illustrate the concept: Three.js: Painting on a Mesh Using a CanvasTexture

You can also check this example with fabric.js:

1 Like