Hello everyone,
I am currently working on a Three.js project where I have a set of landmarks, each defined by their XYZ coordinate values. These landmarks are stored in an array, and I am displaying them on my 3D model.
What I am trying to achieve now is to add the index number from the array to the displayed landmark on the model, so that each landmark’s position in the array is clearly visible on the screen.
Here is a bit more detail about what I have:
- Landmark Array: An array of objects, where each object represents a landmark with XYZ coordinates.
- Displaying Landmarks: I am using Three.js to display these landmarks on my 3D model.
And here is what I need help with:
- Adding Index Numbers: How can I take the index of each landmark from the array and display it next to the corresponding landmark on the model? I want the index number to be visible so that one can easily identify the order of the landmarks.
What did I expected result
My code is not working. There is an error with fontLoader
Uncaught (in promise) SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
function addLandmarksToScene(landmarks: THREE.Vector3[]) {
const sphereGeometry = new THREE.SphereGeometry(0.005);
const sphereMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
landmarks.forEach((landmark, index) => {
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.copy(landmark);
scene.add(sphere);
addTextToScene(index.toString(), landmark);
});
}
function addTextToScene(text: string, position: THREE.Vector3) {
const loader = new FontLoader();
console.log({ loader });
loader.load(HelvetikerFontPath, function (font) {
console.log({ font });
const textGeometry = new TextGeometry(text, {
font: font,
size: 0.01,
height: 0.001,
});
const geometry = new THREE.TextBufferGeometry('title', { font });
const textMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
const textMesh = new THREE.Mesh(textGeometry, textMaterial);
textMesh.position.copy(position).add(new THREE.Vector3(0.01, 0.01, 0));
scene.add(textMesh);
});
}
Any code snippets, guidance, or resources that could help me figure this out would be greatly appreciated.
Thank you in advance for your time and assistance!