# How to rotate a 2d mesh (plane) arround a normal vector get by hit?

Hello,

I’m trying to rotate a 2d mesh arround a normal vector.

The goal is to get like an image who is perpendicular to a normal vector get by a hit on mesh. For example with a sphere, I need the image to be perpendicular to the hit point on the sphere.

Image Example:https://i.stack.imgur.com/rygLL.png

Maybe using dynamics decals can be a solution too but I don’t know how to do it.

Jez

Welcome to the forum.

The normal you need will be given by the vector hitPoint.subtract(sphere.position).normalize().

If you want the normal to the facet that the ray has hit then pickInfo.faceId will give you the id of the facet hit, then have a read of
https://doc.babylonjs.com/how_to/how_to_use_facetdata
in particular Use Facet Data - Babylon.js Documentation to find the normal.

Have a go in a playground, get as far as you can, give a link to your PG in your post and it will be a lot easier to help you.

3 Likes

Hey JohnK,

Thank you for your reactivity and your help, I will check what you told me and come back with my PG as soon as possible,

Jez

So I have my PG : https://www.babylonjs-playground.com/#1YTZAC#16

But now I’m getting lost with the rotation of my mesh (impact) to be perpendicular to the normal vector at the origin of this one.

Exaggerated the plane to check the effect https://www.babylonjs-playground.com/#1YTZAC#22

Can you explain more about what would be dynamic about the decals? How, when, where and why would they change?

Hey hello,

Hope you spent a good week end!

So consider that I’m totally a beginner (even in JS ).

What I understand about decals it’s apply a texture on a 3d mesh and the texture will react like a tattoo, it will take the shape of the mesh. What I technically want is moving thanks the mouse a 2D mesh (literally a plane or a image) on the 3d mesh maybe as a moving decal (maybe moving decal is a more appropriate term) or juste like the first thing you explained to me just try to use normals to display the mesh perpendicularly to the sub faces.

Anyway thank you again for you help I just see that you solved my problem thank you very much really it helps me a lot to understand.

Decal version https://www.babylonjs-playground.com/#1YTZAC#23

2 Likes

That’s incredible thank you very much!!! I will check everything and try to understand it thank you for you help really, if you are in Seoul or planning to come here tell me I owe you a beer!

Hello JohnK,

Sorry to bother you again I’m trying to do the same for a GLTF file that I loaded with the loader but I’m totally lost , I don’t know how to get the meshes of the GLTF file. Do you have some clues?

Sorry busy for a few days. Search forum for gltf

Hello,

Once the GLTF has been loaded, in the callback you can rely on the scene search method to find your meshes back by name or id like:

scene.getMeshByID(“theidyoulookfor”)

Found a bit of time.

In https://www.babylonjs-playground.com/#1YTZAC#23 the mesh referred to in lines 31 and 84 was assigned to the newly created mesh on line 29

In your PG https://www.babylonjs-playground.com/#WGZLGJ#646 the mesh on lines 36 and 37 is not assigned to anything. Put your pointer over the boombox and check the console in your browser for the error message.

Corrected here https://www.babylonjs-playground.com/#WGZLGJ#647 plus added updateFacetData; however still has issues which could be use of right hand system by gltf, or partitioning Use Facet Data - Babylon.js Documentation or something else

Decal Version https://www.babylonjs-playground.com/#1YTZAC#26 seems OK

Thank you Sebavan for you help, and thank you very much JohnK I will check everything you told me to check and I will dig deeper about the GLTF system.

Hey hello I wanted to ask you some help,

I’m trying to apply what you told me in this topic in a personnal project but it appears that It doesn’t work I don’t know why the “norm” is always equal to vector zero.

I can’t show you a PG but I tried to append to the scene a GTLF file and inside this one their is lot of meshes maybe it’s the problem ? Because in the “boombox” there is only one mesh.

The pickResult.pickMesh return the good mesh and same for the nth-facet but apparently the “getFacetNormal” always return a vector 0.

By the way I needed to rotate the meshes so I used a TransformNode to link every meshes into this parent and then rotate the parent. Maybe it affected the result I don’t really know.

This is really tricky without a playground

Having a vector 0 seems highly suspicious like the mesh would have no normals defined ???

Hey Sebavan!

Yeah sorry for the PG, I tried to get the same problem in a PG but I failed to get the same problem

And yeah that’s really weird that no normals are defined, so finally I just recreate the mesh in Blender and join every sub-meshes in one and it works well now but wanted to find why it doesn’t work in the other situation.

1 Like