After discovering an intriguing example on threejs.org that showcases drawing arrow normals, I realized that it is exactly what I need. However, the arrows are complex objects created by ArrowHelper. Upon examining the source code, I came across the setDirection method.
function setDirection( dir ) {
// dir is assumed to be normalized
if ( dir.y > 0.99999 ) {
this.quaternion.set( 0, 0, 0, 1 );
} else if ( dir.y < - 0.99999 ) {
this.quaternion.set( 1, 0, 0, 0 );
} else {
axis.set( dir.z, 0, - dir.x ).normalize();
radians = Math.acos( dir.y );
this.quaternion.setFromAxisAngle( axis, radians );
}
};
Attempting to implement an algorithm for setting rotation for Vector3 using quaternion, I found that my normals still point towards {x: 0, y: 0, z: 0}.
My question now is: How can I calculate a vector to draw a normal line from a surface into space, similar to the image shown here: https://i.sstatic.net/HZHmY.png
UPD:
I am utilizing CylinderGeometry.
UPD2:
The issue has been resolved. Take a look at my codepen: Codepen Link