Detection using default intersectObjects

[antonyadhiban]

Is it possible to detect UI using the default intersectObjects function in three.js instead of using custom raycast() function from interactive.js example ?

I tried detecting the UI using intersectObjects and got back a MeshUI-Frame block which does not contain properties like isUI, states, currentState etc.

Please let me know if I am missing something or it is intended this way.

Greatly appreciate the effort to create such a great library.

[felixmariotto]

Hi ! Yes you can, although I will concede this is not very intuitive.

All three-mesh-ui components extend three.Object3D objects, and visual components like Frames and Texts are added to them with Object3D.add. Therefore, you will find the relevant UI component among the parents. The problem is, some elements use a container object, so you can't know if the relevant UI component is the direct parent of the mesh you are testing. Therefore, you must traverse the ancestors with Object3D.traverseAncestors and look for the isUI property.

Here is a fiddle to help you out : https://jsfiddle.net/felixmariotto/fpwnLmv0/1/

This is the relevant part :

const intersects = raycaster.intersectObjects( objectsToTest, true );

intersects.forEach( (intersection) => {

  intersection.object.traverseAncestors( (ancestor) => {

    if ( ancestor.isUI ) {

      ancestor.set({
        fontColor: new THREE.Color( 0xffffff * Math.random() ),
        backgroundColor: new THREE.Color( 0xffffff * Math.random() )
      });

    }

  });

});