UserData Attributes in Instancing

Hi ThreeJS community,

I have multiple (hundreds) similar 3D objects each would have different UserData attribute values (see picture below for example).

The idea is when the user hover on the 3D object, a tooltip appears showing these values for that specific object in the scene.

This will also allow me color code these objects based on some color scheme (turbo for example - picture below) based on a specific attribute (attribute 3 for example - Red for high values, blue for low values)

What is the best way to achieve this and where and how to assign this userData attribute values.

An example would be awesome !

Thanks everyone

If you can get the index of the instance selected, I’d just use that to look up data in a custom array, like:

var instanceData = [
 { name: 'thing 1', ...},
 { name: 'thing 2', ...},

var selected = instanceData[index];
1 Like

Thanks donmccurdy,

So you would use an array as a global object in javascript code. You would not necessarily embed data into each 3D object using threeJS.

I haven’t thought about it this way…

Thanks for the answer Man !