Is it possible to map an image/canvas as a texture over a gltfjsx model?

[Braedencraig]

https://codesandbox.io/s/hardcore-minsky-okh24

I am successfully creating a canvas as a texture, and I can successfully apply it to my model. However, when I drag the red circle across the bottom of my canvas in the left hand corner, the circle appears super stretched out on my model. I'm assuming this has something to do with the UV mapping? or perhaps the material I am being given from the GLTFJSX? Any help would be greatly appreciated!

I've also tried just scrapping the canvas and straight up applying an image as a texture, and the same thing happens, it just appears very distorted, pixelated and stretched!

Thank you in advance!!!!

[Braedencraig]

Just a few moments ago realized what one of my problems was! The models I was using like the one above, (excuse me if this is not the proper terminology), didn't have a proper unwrapped UV's, at least I think. I loaded in a new model with unwrapped UV's and now it's behaving as I expect it to! Which rules! If anyone wants a codesandbox of the solution I can spin one up!

[drcmda]

was just looking into it, youre right, they looked off

if you have a box that would be sweet, i think this could be something with educational value even since it comes up often

[Braedencraig]

@drcmda Thank you so much for looking into that for me! I'm just learning about UV maps so excuse the knowledge gap on my end! Here is my sandbox solution in case anyone else comes across a similar issue!
https://codesandbox.io/s/vibrant-brook-x5m14
Hope this can help anyone!

[ashleymvanduzer]

this example is awesome! could someone explain though why the canvas texture is explicitly declared and passed to the map prop of the meshStandardMaterial parent? I see it doesn't work without doing this but I don't really understand why. I thought that is what the <canvasTexture... /> child is for. especially so in the sense that the <canvasTexture.... /> is making use of attach="map".

[Braedencraig]

Hey @ashleymvanduzer ! Sorry if my example is a little sketchy, this was the only way I could get it working properly. I think this work around is required with the meshStandardMaterial parent so that the canvas texture can continuously be updated?! That's my limited understanding!

[ashleymvanduzer]

@Braedencraig I wouldn't say it's sketchy at all, though I don't have much else to compare it to. thanks to this example I was able to fix the issue I was dealing with in regard to canvasTexture, so that's two places it works properly.. and it makes sense it has to do with continuous updating. now that I think about it, maybe the map needs to be delcared on the material so that the attach of the canvas texture has something to attach to.