Is there a way to draw directly onto a model/texture in threejs?

Question

I've been looking for a solution to this problem for a project I'm working on. I'd like to know if there is a way to click on a plane geometry and draw onto it, paint style, and have the texture update as you draw on it.

After this, is there a way to save that texture while in the browser now that you've edited it?

Answer 1

You could use raycasting to determine the UV texture position where the mouse intersection takes place. Raycaster.intersectObject returns an array of objects, one of its properties is .uv. You can see it in action in this demo.

You can use a 2D <canvas> as the source of the texture. Once you have the UVs from the intersection, you could use that position to draw on the canvas as demonstrated in this other demo