My goal is to add labels on AxisHelper in Three.js that rotate along with it. I came across a helpful code snippet from this source:
// Axes
axes2 = new THREE.AxisHelper(70);
// Axes labels
addLabelAxes();
// Add axes to zoomScene
zoomScene.add(axes2);
function addLabelAxes() {
// Axes label
var loader = new THREE.FontLoader();
loader.load('js/helvetiker_regular.typeface.js', function (font) {
textGeo = new THREE.TextGeometry('Example label', {
font: font,
size: 15,
height: 5,
curveSegments: 10,
});
var color = new THREE.Color();
color.setRGB(255, 0, 0);
textMaterial = new THREE.MeshBasicMaterial({ color: color });
meshText = new THREE.Mesh(textGeo, textMaterial);
// Position of first axis
meshText.position.x = axes2.geometry.vertices[1].x;
meshText.position.y = axes2.geometry.vertices[1].y;
meshText.position.z = axes2.geometry.vertices[1].z;
meshText.rotation = zoomCamera.rotation;
zoomScene.add(meshText);
});
}
However, when attempting to implement this code, I encountered the following error in the console log:
TypeError: axes2.geometry.vertices is undefined
addLabelAxes/<()
sphere_dev.js:230
THREE.FontLoader.prototype.load/<()
three.min.js:382
THREE.XHRLoader.prototype.load/<()
What could be causing this issue?