How To Align Torus With Tube?

[Rolento]

Hi All

I am new to BabylonJS and have been playing with the library for a few days now and am absolutely loving it!  A big thumbs up to the team/community that have developed this amazing library. 

My 3D geometry is rusty, hence im having problems resolving what many will see as a simple 3D transformation.  My scene has a simple tube created from a path that was created using a bezier curve.  Along the path trajectory I want to render a series of torus shapes, each torus needs to be aligned with the tube axis. 

I have created a simple program that creates; the bezier curve path, the tube and adds the torus shapes along the trajectory.  Without attempting to rotate the torus shapes I get the following result (which is expected):

(see attachement 1)

Playground Code:  http://www.babylonjs-playground.com/#1PSZDF#23

To fix this problem (i.e. rotate the torus to align with the trajectory of the tube) I have an idea but do not know how to code this using the Babylon JS API - here is my idea for aligning the torus to the tube:

a ) the bezier path trajectory has a series of vertices that can be used for defining a vector/axis and position for the Torus to be positioned.

b ) the tube mesh (end region) has a series of vertices that can be used to define a plane for aligning the Torus with the Tube.

(see attachement 2)

Use the above vertices to define a plane / axis for orientaton - e.g. if adding the torus at start of the tube mesh then you could:

1 ) create vector for defining axis of trajectory (i.e. use bezier path points (1) and (2) for defining the vector)

2 ) create a plane for aligning the torus (i.e. use bezier path point (1) and end tube mesh points (a) and (b) for defining the plane)

i.e.

(see attachement 3)

Using the above it should now be possible to orientate the Torus to the specified plane. The only problem is:

a ) I dont know how to reference the end tube mesh points

b ) I dont know which API calls I should use to orientate the torus to the specified plane/vector

c ) Im guessing there is probably an easier method for solving my problem

If anyone can help me out with this challenge I would appreciate it (possibly update the playground code to illustrate what needs to be done?).

Thanks in advance

Rolento

[jerome]

Welcome to the forum

Well, I don't have much time to hack your PG (thanks to have done one btw) but I'll give some hints :

The tube mesh keeps a reference to the Path3D on which it is built. What is a Path3D ? it's a logical object described here : http://doc.babylonjs.com/tutorials/How_to_use_Path3D 

and the Path3D provides some properties : http://doc.babylonjs.com/classes/2.4/Path3D

Back to your tube : each tube axis point holds a Path3D point... so also a normal, tangent and binormal to the tube axis, it is to say one system with 3 orthogonal normalized vectors, each system being aligned to the tube axis on the current axis point. Ok ?

This system (tangent, normal, binormal) can be then used with the method RotationFromAxis() to get a rotation value to rotate a mesh (or anything else) to be aligned with this target system :

http://doc.babylonjs.com/overviews/How_Rotations_and_Translations_Work#generating-a-rotation-from-a-target-system

http://doc.babylonjs.com/classes/2.4/Vector3#static-rotationfromaxis-axis1-axis2-axis3-rarr-vector3-classes-2-4-vector3-

 

So how would I do ? 

build the tube, get its path3D 

var path3d = tube.path3D;

then get the tangent, normal and binormal on every tube axis point where you want to set your torus

compute a rotation with rotationFromAxis(tangent, normal, binormal) for each torus... and rotate each torus from this rotation

 

[Rolento]

Hi Jerome

Thanks for your input - you are a star!  The Path3D object is perfect, it makes life so easy for what I am trying to do.  So with a few minor tweaks here is the fixed code:

http://www.babylonjs-playground.com/#1PSZDF#24

Out ot interest, given a vector (as per the original post - i.e. two points along the axis of the tube bezier curve) how could somene calculate the tangent and binormal?  Im just wondering if there are Babylon functions for performing this calculaton...

Once again thank you for your help much appreciated!

Regards

Rolento

[jerome]

nice PG

AFAIK, there's no provided function to calculate the normal and binormal of a given vector (then considered as a tangent), but you could use the internal Path3D way to do here :  https://github.com/BabylonJS/Babylon.js/blob/master/src/Math/babylon.math.ts#L3691

this function returns a normal vector to the vector paramerer vt

 

[Rolento]

Hi Jerome

Thanks again for your guidance.  I took a look at the function you specified and had a quick play to see what I could come up with.  I managed to successfully calculate the vectors and align the torus shapes:

http://www.babylonjs-playground.com/#1PSZDF#25  

NOTE: you can toggle between using Path3D and my functionality by appropriately commenting out lines 53~59.

Not the most elegant code but it does the job (also im guessing there are predefined Babylon helper functions for calculating surface normals and vectors etc - hopefully I will stumble on them once I have learnt the API a little better).

Once again thanks for your help, and hopefully these code snipplets might be of use to someone else.

Rolento