Looking for a good way for painting over GLT model

Questions
1

Hey, i’m looking for a way to paint over selected part’s of GLT model and store the marks after.
I’ve run into the following examples :
chameleon
webgl-paint

The problem is that none of them supports mobile events , i wonder if any of you have a poc or an example that i could use. - Thanks.

2

Seems like something canvas texture and UV raycasting should be able to quickly solve :thinking: (as for events - raycasting supports whatever you use for its calculations, so all MouseEvents PointerEvents and TouchEvents should work just fine.)

3

Thanks - i’ve also noticed “canvas texture” example - but how can i implement it with a direct paint over glt file?

4

What did you try already :thinking: ? You shouldn’t really need much more except for the two examples linked above tbh.

5

Thanks - first i’ve tried to figure out how can i get rid of the 2d canvas and replace the rectangle with my own glt file - but i couldn’t manage to do so… i don’t really understand the logic of it…

6

Try starting with the second example - raycast mouse pointer on the model and determine the .uv coordinates of the intersection.

After that’s ready - add a CanvasTexture to the project and apply it to the glTF model (if model already uses some texture, either paint it on that CanvasTexture or set .autoUpdate = true on that original texture.)

Then all that needs to be done is to take the .uv from point A, and paint on correct coordinates of canvasTexture.canvas.getContext('2d').

7

thanks - i’ll check during the weekend and let you know

8

Say, is there a way to use This Example and simply apply decals as long as the mouse/pointer is down? so it will be like painting … so instead of adding mark one at a time - perhaps i could use the mouse/pointer down event and simply add decals a long as the mouse moving…is it possible?

Maybe something like

   var timer;
   document.addEventListener("mousedown", function(){  // or touchstart
      
       checkIntersection(event.pageX, event.pageY);
        timer = setInterval(function(){
          if (intersection.intersects) shoot(); // need to figure out how to add decal with current position
      }, 100);
     
    });
    document.addEventListener("mouseup", function(){ // or touchend 
       if (timer) clearInterval(timer)
    });