How to respond differently to ray casting? (VR)

Question

How can I respond differently depends on the type of element?

The first thing that comes to my mind is to check the type of the mesh, but it will not work with complex objects like button (Plane + Text + Hitbox).

const squares = new Group();
const circles = new Group();
const spheres = new Group();

// skip meshes initialization
squares.add(squareMesh);
circles.add(circleMesh);
spheres.add(sphereMesh);

// skip raycaster initialization
const intersections = raycaster.intersectObjects([
    squares,
    circles,
    spheres,
], true);

const intersectedElement = intersections[0];

For example:

If Button then change the color of the text

If Sphere then scale it two times

Answer 1

One approach to solve this problem is to store custom data in Object3D.userData. You can freely define a data structure that accommodates your needs. The evaluation code after the intersection test could look like this:

const intersectedElement = intersections[0];
const object3D = intersectedElement.object;

if ( object3D.userData.objectType === 'Button' ) {

    // change the color of the text

}