UserData Attributes in Instancing

Questions
1

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

image
image1237×916 142 KB

image
image1111×341 5.48 KB

2

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
3

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 !