Find rotation angle between 2 vectors

Questions
1

Hi folks!

I’m trying to create an axle that sits between 2 meshes and stays between them. So far I’ve managed to get the position in the middle using vector3 lerp, but I’m unable to work out how to get it to rotate so the axle ends are pointing at the meshes.

I had a go at using the cross product to find the angle between the 2 vectors but math is not one of my strengths so I have no idea where I’m going wrong (or if I’m even using the right method).

Here is a playground with what I’ve worked out so far. https://www.babylonjs-playground.com/#VABMXV

1 Like
2

Hi @Mr_K

If i understood your query correctly, this is quite simple using a Tube with it’s Path, Updateable & Instance options instead of a Cylinder;

https://www.babylonjs-playground.com/#VABMXV#1

You can read more about Tubes, here; Create Parametric Shapes - Babylon.js Documentation

2 Likes
3

That’s pretty awesome!

However I’m using a gltf model that is shaped like a cylinder with some extra detail and not a regular cylinder.

I tried parenting the gltf mesh to the tube however this doesn’t seem to work as the parents origin is not whats moving.

Guess this is still a math problem

4

This PG https://www.babylonjs-playground.com/#VYM1E#36 shows a pre-built cylinder joining two spheres as they move.

The important parts in this PG are

  1. initially force cylinder to lie along x axis, baking transformation and so scaling the x property of the mesh and ensuring axis1 is the first parameter of the RotationFromAxes
axis1 = (sphere1.position).subtract(sphere2.position);
axis3 = BABYLON.Vector3.Cross(camera.position, axis1);
axis2 = BABYLON.Vector3.Cross(axis3, axis1);
mid = ((sphere1.position).add(sphere2.position)).scale(0.5);

mesh.scaling.x = axis1.length(); // reset scale to match distance between spheres
mesh.position = mid; // reposition mesh so that its center is the mid point between spheres
    
mesh.rotation = BABYLON.Vector3.RotationFromAxis(axis1, axis2, axis3); //match rotation to line joining spheres
  1. The formation of axis3 uses the camera position as an arbitrary vector to calculate an axis perpendicular to axis1

This PG https://www.babylonjs-playground.com/#VYM1E#37 starts with the created cyclinder in its created orientation, vertical. So provided axis1 is assigned to the y axis (rather than the x axis) there is no need to bake the mesh. The orientation of your imported mesh and whether it is already aligned to one of the axes x, y, or z depends on the need for baking and which axis (x, y, or z) that axis1 is assigned to. Sometimes you may need to swap axis2 and axis3 around for the cylinder to be in the proper direction.

3 Likes
5

Darn it @JohnK :slight_smile:

Here’s one using mesh.lookAt()
https://www.babylonjs-playground.com/#VABMXV#2

4 Likes
6

Nice. There is always more than one way to skin a cat :cat2::hocho::scream_cat::cat2::scissors::scream_cat: (but please don’t )

1 Like
7

That works perfectly! Thanks for sharing your wisdom, I’m sure all 3 techniques will come in handy in the future.

…and don’t worry, no cats were harmed in the making of this game :smile_cat:

1 Like