THREE.JS Raycaster and JS "objects" instead of meshes

Question

I have an issue regarding the Raycaster model. I understand the idea and the fact that it intersects meshes, which I can transform, but for example, if I create JS objects that have an inner THREE.Object3D that groups meshes (for their UI), how can I know when the corresponding instance of an object is clicked?

Imagine a button. This button has several characteristics and an inner _model that holds it's THREE.js graphical form (let's say a boxGeometry and a textGeometry that build this button). When the button is added to the scene it adds its buttonInstance.getModel() to the scene, and adds itself to a repository of objects to keep a reference to it.

If I wanted to click this button, I create a raycaster and get the intersecting objects from an array of "buttons" (Objects 3D or Meshes that represent this object).

But how do I fire an event or interact with the button instance itself? I have the mesh but can't get the idea on how to link it with the instance itself.

Any clues? I've searched a lot about raycasting in THREE, but all the examples relate to 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); // alter position of the Object3D that holds textMesh and BoxMesh

But how do I even know which button is this one that has been 'clicked' if all buttons have two meshes and I dont see a way of idetifying them once they are in the scene?

Thanks

d

You can add a name or type or any other field to the mesh before adding it to scene mesh.name = 'button' or mesh.type = 'text' and later check if(_activeBtns[0].name === 'button') — uhura
@uhara Do not overwrite the type property of a three.js object. Use userData, instead: mesh.userData.type = 'text'. — WestLangley
@WestLangley Thanks for the correction, unfortunately I can't edit my comment anymore. — uhura

diekus diekus · Accepted Answer · 2015-10-02T10:36:55

@uhara, @WestLangley. In the end I opted to 'bind' them by the uuid that the mesh has in the scene, since the abstract object has access to the mesh also.

THREE.JS Raycaster and JS "objects" instead of meshes

1 Answers