THREE.js : Object3D.userData how does it work?

Question

So I was wondering how the .userData property worked in the Object3D class.

So this is what I understood :

It is an empty object that is not used by any internal logic of threejs, it is a safe way to park data that I want to have assigned to a given object. And that adding custom stuff to the object itself can cause problems in the event that there is a conflict.

But the only problem is I do not know when to use it or how I can implement this in my code? But can someone tell me if what I said is right?

Answer 1

According to the three.js documentation

.userData : Object An object that can be used to store custom data about the Object3D. It should not hold references to functions as these will not be cloned.

and what is Object3D

This is the base class for most objects in three.js and provides a set of properties and methods for manipulating objects in 3D space.

so Object3D will be the base class for most of the objects in three.js including Cameras, Lights, Mesh, Materials etc.

Whenever you need to store some custom information about that perticular object that you might want to use for displaying or any other calculation, you will store that in .userData property.

A simple example could be that you created a geometry (a BoxGeometry), now you want to keep track of the count how many times user clicked on this geometry. This count can be kept in the .userData property. Later you can use it however you want, either to display it somewhere or do further calculations.