How To exclude helper objects from intersection check by raycaster in threejs?

Question

I have a threejs scene with intersection checking on objects. I'm adding every scene object to the array which is then checked by the raycaster.

var intersects = raycaster.intersectObjects( scene.children );

I then check the color of an object and change it on contact with the mouse pointer.

INTERSECTED.material.emissive.setHex( 0xff0000 );

If I add a helper object, like CameraHelper or GridHelper, to the scene I get constant errors because .getHex .setHex is not possible with the helper objects.

Is it possible to exclude the helper objects from this check and how would I do this?

It has to be something like scene.children - scene.helpers but I cannot come up with a way to do this. Thanks for the help.

Crymotherapy

Answer 1

Create an array of objects that you want Raycaster to process.

var objects = [];

objects.push( mesh1 );
objects.push( mesh2 );

---

var intersects = raycaster.intersectObjects( objects, recursiveFlag );

three.js r.73

Cryogen

Thank you very much. I added the objects to the scene and an extra array as you described and only process the extra array in the raycaster. – Crymotherapy

Answer 2

From my understanding, there are 2 solutions:

• https://threejs.org/docs/index.html#api/en/objects/Group
• https://threejs.org/docs/index.html#api/en/core/Layers

A reason you might not want to use Group for this is because you might be using Group to keep multiple objects together but you would only want to raycast test for some objects in the Group.

Invasive

Answer 3

Filter the helper object from the scene.children using a name identifier. Pass the new array into the Raycaster:

const axesHelper = new THREE.AxesHelper();
axesHelper.name = "axes_helper";
scene.add(axesHelper)

const filteredChildren = scene.children.filter(item => item.name !== "axes_helper")
const intersects = raycaster.intersectObjects(filteredChildren);

Dillondillow