I am facing a challenge with the Raycaster model. I grasp the concept of how it intersects meshes that can be transformed, but my issue lies in identifying when the specific instance of an object is clicked.
Consider a scenario where there is a button. This button comes with various attributes and an inner _model that defines its THREE.js visual representation (such as a boxGeometry and a textGeometry). When this button is incorporated into the scene, it includes its buttonInstance.getModel() and is stored in a repository for future reference.
If I intend to click on this button, I utilize a raycaster to determine the intersecting objects from an array of "buttons" (3D Objects or Meshes representing these objects).
However, how can I trigger an event or interact directly with the button instance? While I have access to the mesh, I struggle to establish a connection with the instance itself.
Do you have any ideas on how to approach this? Despite researching extensively on raycasting in THREE.js, most examples are focused on changing colors or positions of meshes.
_raycaster.setFromCamera(new THREE.Vector2(0,0), _camera);
_activeBtns = _raycaster.intersectObjects(_buttons, true);
_activeBtns[0].object.parent.position.set(curPos.x, curPos.y, curPos.z-.2); // modify position of the Object3D containing textMesh and BoxMesh
Moreover, how can I identify which button has been 'clicked' if all buttons consist of two meshes and do not offer a clear method of identification once they are within the scene?
Thank you
d