three.js - 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

解决此问题的一种方法是将自定义数据存储在Object3D.userData中。您可以自由定义满足您需求的数据结构。交集测试后的评估代码可能如下所示：

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

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

    // change the color of the text

}