JSONLoader raycaster & collision meshes - three.js

Question

I'm using raycaster to see if I hit a mesh with the mouse ( or touch ) the object is thin and I could do with increasing the size of whatever can be intersected with the Ray. As with games objects, (using three.js) can I add my own collision mesh, that obviously does not render, but triggers the Ray?

So, when my ray hits the (invisible) pink cylinder that is associated with the original mesh, it triggers the intersect.

I can't simply make another mesh that is grouped with the original and make it visible = false; or opacity = 0; that dosen't work. I'm looking for something 'built in' ( if it exists )

many thanks

Answer 1

You want to add a collision mesh to your scene that responds to raycasting, but does not render.

To do so, add your collision mesh as a child of your mesh, and set the visibility of the collision mesh's material to false.

collisionMeshMaterial = new THREE.MeshBasicMaterial( {
    visible: false
} );

The collision mesh will not render, but it will respond to raycasting.

three.js r.74

Answer 2

You could maintain a collection of clickable meshes without adding them to the scene. Then just raycast against this collection: raycaster.intersectObjects(collection);

You may have to keep them "synchronized" with their parent object though.