Rotate the cylinder according to the normal vector of the tube endpoint

Question

Rotate the cylinder according to the normal vector of the tube endpoint

I'm working on creating a curved 3D arrow using three.js. My approach involves using a Tube along a curved path and a Cone shaped cylinder. Here's how they currently look:

https://i.sstatic.net/jmVB6.png

https://i.sstatic.net/P756z.png

My goal is to position the Arrow Head (Cone) at the end of the Tube, as shown in this Photoshopped image:

https://i.sstatic.net/DWfWB.png

Since I'm not very strong in math and new to three.js, I would really appreciate some guidance on how to connect the two elements. Here's the code I currently have:

        import T from 'three';

        var findY = function(r, x)
        {
           return Math.sqrt((r * r) - (x * x));
        }

        var radius = 25;
        var x = 0;
        var z = 0;
        var numberOfPoints = 10;
        var interval =  (radius/numberOfPoints);
        var points = [];

        for (var i = numberOfPoints; i >= 0; i--) 
        {
           var y = findY(radius, x);
           points.push(new T.Vector3(x, y, z))
           x = x + interval;
        }

        x = x - interval;

        for (var i = numberOfPoints - 1 ; i >= 0; i--) 
        {
           y = findY(radius, x) * -1;
           points.push(new T.Vector3(x, y, z));
           x = x - interval;
        }

        var path = new T.CatmullRomCurve3(points);

        var tubeGeometry = new T.TubeGeometry(
            path,  
            10,    
            radius / 10,     
            8,     
            false  
        );

        var coneGeometry = new T.CylinderGeometry(
            radiusTop = 0.1,
            radiusBottom = radius/5,
            height = 10,
            radialSegments = 10,
            heightSegments = 10,
            openEnded = 1
        );

        var material = new T.MeshBasicMaterial( { color: 0x00ff00 } );

        var tube = new T.Mesh( tubeGeometry, material );
        var cone = new T.Mesh( coneGeometry, material );

        // Translate and Rotate cone?

I would really appreciate some guidance on the mathematical and programmatic steps needed to:

Find the normal at the end of the tube
Move the Cone to the correct position

Any help would be greatly appreciated!

javascript math three.js geometry coordinates

Answer 1

Answer №1

To avoid using rotation, you can create the arrowhead directly in place. The same can be done for the bended tube. All you need is the last line segment defined by endpoints A and B.

Designate point A as the sharp point and point B as the disc base center. To create the arrowhead, you'll need 2 additional basis vectors, let's call them U and V, along with the radius r of the base disc. You can then create the disc points using a simple circle formula like this:

https://i.sstatic.net/NWgPE.png

Obtain AB endpoints

Compute UV basis vectors

The UV vectors should lie in the base of the arrowhead disc and be perpendicular to each other. The direction of the arrowhead (line BA) is the normal of the disc base, so you can use the cross product to get vectors perpendicular to U and W:

W = B-A;
W /= |W|;    // unit vector
T = (1,0,0); // choose any non-zero vector not parallel to W
if (abs(W.T)>0.75) T = (0,1,0); // if the dot product of T and W is close to 1, they are parallel so choose a different T
U = (T x W) // U is perpendicular to T,W
V = (U x W) // V is perpendicular to U,W

Create/render arrowhead geometry

The centers of the triangle fan are A and B. The base disc points are computed as follows:
```
P(ang) = B + U.r.cos(ang) + V.r.sin(ang)
```
Loop through ang around the circle with some step to generate enough points (usually 36 is adequate) and create two triangle fans from them. Remember that the last disc point must be the same as the first one to avoid gaps or irregularities.

If you prefer using rotations instead, here's how you can do it. Compute UVW in a similar manner as above and construct a transformation matrix from them. Point B will be the origin O, and the axes X, Y, Z will be U, V, W. The correct order depends on your arrowhead model, and W should align with the model axis. U and V can be in any order. Use this matrix for rendering. For more information, refer to:

Understanding 4x4 homogenous transform matrices

[Notes]

If you're unsure how to compute vector operations like cross/dot products or absolute value, see:

// cross product: W = U x V
W.x=(U.y*V.z)-(U.z*V.y)
W.y=(U.z*V.x)-(U.x*V.z)
W.z=(U.x*V.y)-(U.y*V.x)
// dot product: a = (U.V)
a=U.x*V.x+U.y*V.y+U.z*V.z
// abs of vector a = |U|
a=sqrt((U.x*U.x)+(U.y*U.y)+(U.z*U.z))

[Edit1] Simple GL Implementation

For a basic C++/GL implementation, here's a straightforward approach:

https://i.sstatic.net/LVlsf.png

 // GL implementation code here

This code renders a bended arrow in the XY plane with specified parameters. Feel free to adapt this code to your environment as needed.

[Edit2]

If you require a 3D version for non-axis aligned arrows, you can use this code snippet:

// 3D implementation code here

This version supports creating arrows in 3D space, allowing for more flexibility in arrow design. Make sure to adjust the parameters accordingly for your specific requirements.

For further details on vector operations used in the code, refer to the explanations provided.

Answer 2

To avoid using rotation, you can create the arrowhead directly in place. The same can be done for the bended tube. All you need is the last line segment defined by endpoints A and B.

Designate point A as the sharp point and point B as the disc base center. To create the arrowhead, you'll need 2 additional basis vectors, let's call them U and V, along with the radius r of the base disc. You can then create the disc points using a simple circle formula like this:

https://i.sstatic.net/NWgPE.png

Obtain AB endpoints

Compute UV basis vectors

The UV vectors should lie in the base of the arrowhead disc and be perpendicular to each other. The direction of the arrowhead (line BA) is the normal of the disc base, so you can use the cross product to get vectors perpendicular to U and W:

W = B-A;
W /= |W|;    // unit vector
T = (1,0,0); // choose any non-zero vector not parallel to W
if (abs(W.T)>0.75) T = (0,1,0); // if the dot product of T and W is close to 1, they are parallel so choose a different T
U = (T x W) // U is perpendicular to T,W
V = (U x W) // V is perpendicular to U,W

Create/render arrowhead geometry

The centers of the triangle fan are A and B. The base disc points are computed as follows:
```
P(ang) = B + U.r.cos(ang) + V.r.sin(ang)
```
Loop through ang around the circle with some step to generate enough points (usually 36 is adequate) and create two triangle fans from them. Remember that the last disc point must be the same as the first one to avoid gaps or irregularities.

If you prefer using rotations instead, here's how you can do it. Compute UVW in a similar manner as above and construct a transformation matrix from them. Point B will be the origin O, and the axes X, Y, Z will be U, V, W. The correct order depends on your arrowhead model, and W should align with the model axis. U and V can be in any order. Use this matrix for rendering. For more information, refer to:

Understanding 4x4 homogenous transform matrices

[Notes]

If you're unsure how to compute vector operations like cross/dot products or absolute value, see:

// cross product: W = U x V
W.x=(U.y*V.z)-(U.z*V.y)
W.y=(U.z*V.x)-(U.x*V.z)
W.z=(U.x*V.y)-(U.y*V.x)
// dot product: a = (U.V)
a=U.x*V.x+U.y*V.y+U.z*V.z
// abs of vector a = |U|
a=sqrt((U.x*U.x)+(U.y*U.y)+(U.z*U.z))

[Edit1] Simple GL Implementation

For a basic C++/GL implementation, here's a straightforward approach:

https://i.sstatic.net/LVlsf.png

 // GL implementation code here

This code renders a bended arrow in the XY plane with specified parameters. Feel free to adapt this code to your environment as needed.

[Edit2]

If you require a 3D version for non-axis aligned arrows, you can use this code snippet:

// 3D implementation code here

This version supports creating arrows in 3D space, allowing for more flexibility in arrow design. Make sure to adjust the parameters accordingly for your specific requirements.

For further details on vector operations used in the code, refer to the explanations provided.

Rotate the cylinder according to the normal vector of the tube endpoint

Answer №1

Similar questions

How can we stop the anchor jump caused by a third-party script?

Experiment with parsing multiple outputs instead of repeatedly coding them as constants in Node.js

Axios mistakenly includes an additional trailing slash in body parameters

Keep only certain fields and eliminate the rest

Having trouble with the scrollbar appearance after updating Chrome?

Node is throwing a 302 error on Localhost:3000

Utilize Google Drive and scripts to incorporate map images into a React application

What is the best way to incorporate the value of a textbox into a list?

css: positioning images with overlap in a responsive layout

Implementing a feature to automatically set the datepicker value to the selected date upon page initialization

Success callbacks parsed from AJAX requests

Raycaster in Three.js fails to recognize clicks on objects

Node.js encounters issues when attempting to rename a folder

Adding methods to a constructor's prototype in JavaScript without explicitly declaring them

Redefining the onClick function in the Redux 'presentation' component to include parameters

Marker on Google Maps in Dark Mode is not displaying properly

What steps should I take in modifying my existing code to use jQuery to set my div to a minimum height rather than a fixed height?

Navigate through the options on the left menu by sliding your

Tips on dividing a div into two separate pages when converting to PDF

Is it possible to adjust the size of a p5.js canvas within a bootstrap Div container?