I have a unique challenge with positioning a HUD object on the front of a tube in Three.js. The HUD needs to align itself based on a vector point, always facing towards the high side of that point, regardless of the direction and position of the tube. To better illustrate the issue, I've included an image below.
https://i.sstatic.net/C2PNW.jpghttps://i.sstatic.net/cyCoI.jpg
In the provided image, the green arrow represents the pipe, while the red line indicates the vector point around which the circular object must rotate on the z-axis to align properly.
My approach involved calculating the angle between the vector point and its center point to determine the required rotation along the z-axis for alignment. While this method works in certain scenarios, it falls short when the object is oriented upside down. Additionally, I am using the last point of the tube as a reference for placement, ensuring that the object remains perpendicular at all times.
rotateobject() {
//set the object perpendicular to the pipe
this.hudObj.lookAt(this.previouspoint);
let zerovector = new THREE.Euler();
//reset the rotation
this.hudObj.rotation.copy(zerovector);
this.hudObj.lookAt(this.previousActualPoint);
//Line to be able to see if the object is aligned
var material = new THREE.LineBasicMaterial({
color: 0x0000ff
});
var geometry = new THREE.Geometry();
geometry.vertices.push(
new THREE.Vector3( this.previouspoint.x , this.previouspoint.y, this.previouspoint.z),
new THREE.Vector3( ((this.previouspoint.x) + this.previouspointdata.highSide.x), ((this.previouspoint.y) + this.previouspointdata.highSide.y), ((this.previouspoint.z) + this.previouspointdata.highSide.z) ),
);
var line = new THREE.Line( geometry, material );
this.scene.add( line );
/// calculate angle and rotate in z axis
var angleRadians = Math.atan2(parseFloat(this.previouspointdata.highSide.y.toFixed(1)), parseFloat(this.previouspointdata.highSide.x.toFixed(1)));
if (angleRadians > '0' && angleRadians < Math.PI / 2) {
this.hudObj.rotateZ(-(Math.PI / 2 - angleRadians) );
}//0-90
else if (angleRadians < Math.PI && angleRadians > Math.PI / 2) {
this.hudObj.rotateZ((angleRadians - Math.PI / 2) );
}//90-180
else if (angleRadians > -Math.PI && angleRadians < -Math.PI / 2) {
this.hudObj.rotateZ((-Math.PI/2 + angleRadians) );
}//-180-90
else if (angleRadians < '0' && angleRadians > -Math.PI / 2) {
this.hudObj.rotateZ(-(Math.PI / 2 - angleRadians));
}//-0-90
else if (angleRadians === '0') {
} //0
else if (angleRadians === Math.PI || angleRadians === -Math.PI) {
this.hudObj.rotateZ(-(Math.PI / 2) );
}//180
else {
if(Math.sign(angleRadians) === -1){
this.hudObj.rotateZ( Math.PI );
}
}
}
Your assistance on this matter is greatly appreciated as I find myself stuck. Thank you everyone for your help!