I need to display specific text data for each object based on database entries in my project. However, despite creating a cube for each entry in the database, I'm encountering issues with undefined data. It seems like my code should work, but it's not.
getData()
async function getData() {
try {
var response = await fetch('/api/indexvr');
var data = await response.json();
for (var i = 0; i < data.length; i++) {
cube = new THREE.Mesh(geometry, material.clone());
cube.userData = {
id: data.id,
URL: `/vr/${data.id}/`,
title: data.title,
description: data.description
};
cube.position.x = i;
scene.add(cube);
console.log(cube.userData)
//group.add(data)
}
} catch (e) {
console.error(e)
}
}
The code above is used to retrieve information from my MongoDB collection, which includes file paths along with titles, descriptions, and labels for each file.
After researching, it appears that using 'userData' is the recommended approach for storing additional object information in Three.js.
Currently, I am able to change the color of objects when hovering over them with Raycasting. Once I resolve this issue, I plan to implement functionality that displays the title when an object is hovered over and redirects to the corresponding URL when clicked.
As a newcomer to three.js, I find the process quite challenging.