How to get the uv coordinate of a mesh

I don’t know if this description is accurate,actually I want to implement a function like:RaycastHit.textureCoord in Unity or Raycaster.intersectObject in Three.js which returns the uv coordinate of the hitten mesh.
After some googling, I found a nice solution on github which implement a part of this function:
https://github.com/playcanvas/engine/pull/989

But that is not enough :pensive:
Does anyone know how to accomplish this or any better solution?

Hi @FBplus,

I haven’t seen any similar method or project in Playcanvas. Agreed it would be a good feature to have.

Here is the Three.js implementation, if anybody would like to give it a try:

1 Like

@Leonidas Hi Leonidas,Thanks for your reply :smile:
I’ve read that code and found this function:
https://github.com/mrdoob/three.js/blob/0950e5b6e8bceb520c154f45b5c240af45f0ed11/src/objects/Mesh.js#L438
I think the only thing I have to figure out may be the uv coordinates of each vertex :thinking:
If I know the index of a triangle based on IndexBuffer,Is there anyway to get the uv coordinates of three vertices of that triangle?

There isn’t a Playcanvas built in method for that, but study the Three.js Triangle class to see the math behind it:

1 Like

@Leonidas I made it :smile:
I’ve created a test project base on this function and it works fine :smiley:
https://playcanvas.com/project/704805/overview/paint-3d-test

2 Likes

Wow @FBplus, that is working beautifully!! Many thanks for sharing.

I am going to definitely take a look at your implementation, this is quite useful for many things.

Nice work :slight_smile:

We also have released a similar demo if both of you are interested: https://playcanvas.com/project/702588/overview/character-damage-demo

3 Likes

@Leonidas I am so glad if you found this project useful :grin:
To be honest, I just copy and paste the code from threeJS with minor adjustments without considering the performance :joy: and there is still a lot to improve.

1 Like

Hello @FBplus and @Leonidas - I want to paint the back of a woman: https://playcanvas.com/editor/scene/1031376

  • unfortunately, and no matter what I do, the brush only works on the top left area of my cutout back model?

As you can see; one of my workaround has been to alter this line in raycast.js:
this.cameraEntity.camera.screenToWorld(screenPosition.x*3.6, screenPosition.y, this.cameraEntity.camera.farClip, this.ray.direction);

(screenPosition.x multiplied by 3.6 in order to center the painted)

But otherwise, the problem of not being able to; paint blue on the whole area, still stands.

ok, got it working with a similar adjustment … don’t bother (nice example anyway @FBplus)