Within my main scene, there is a sphere along with a subwindow located in the bottom right corner where I have displayed the (x,y,z) axis of the main scene.
In this specific subwindow, I am aiming to label each axis as "X", "Y", and "Z" at the end of each AxisHelper. While I am familiar with using TextGeometry, my challenge lies in rotating these labels so they consistently face the user.
An example of the issue can be seen on this [link][1]: the "X" label remains fixed relative to the axis and rotates with the camera, failing to always face the user.
Having reviewed resources such as link1 and link2, I attempted to incorporate the following code snippet (using only the "X" label for demonstration):
function addLabelAxes() {
// Axes label
var loader = new THREE.FontLoader();
loader.load( 'js/helvetiker_regular.typeface.js', function ( font ) {
var textGeo1 = new THREE.TextGeometry( 'X', {
font: font,
size: 5,
height: 0.1,
bevelThickness: 0.1,
bevelSize: 0.1,
bevelEnabled: true,
} );
var color = new THREE.Color();
color.setRGB(255, 255, 255);
textMaterial = new THREE.MeshBasicMaterial({ color: color });
var meshText1 = new THREE.Mesh(textGeo1, textMaterial);
// Position of axes extremities
var positionEndAxes = axes2.geometry.attributes.position;
var label1X = positionEndAxes.getX(0);
meshText1.position.x = label1X + axisLength;
meshText1.position.y = 0;
meshText1.position.z = 0;
// Rotation of "X" label
//meshText1.rotation = zoomCamera.rotation;
meshText1.lookAt(zoomCamera.position);
// Add meshText to zoomScene
zoomScene.add(meshText1);
});
}
zoomCamera represents a PerspectiveCamera which serves as the camera for the subwindow (zoomScene). The addition of TextGeometry to zoomScene is achieved through:
zoomScene.add(meshText1);
I am uncertain about potential errors in my code. Is it feasible to rotate the "X" label independently, meaning the label rotates like an axis but maintains a self-oriented angle based on rotation theta, ensuring the label continually faces the user during camera rotations?