Raycast intersectObjects on group returns every element in the group, not the raycast target

Questions
1

I’m not sure if it’s intended behavior or what I’m missing. I can get this to work in the “mousedown” event, but not by raycasting from the mouse in the DragControls “dragend” event.

var mouse = new THREE.Vector2();
mouse.x = (event.clientX / renderer.domElement.clientWidth) * 2 - 1;
mouse.y = - (event.clientY / renderer.domElement.clientHeight) * 2 + 1;

let raycaster = new THREE.Raycaster();
raycaster.near = 0;
raycaster.far = 100;

raycaster.setFromCamera(mouse, camera)

const intersects = raycaster.intersectObjects(slots, false);

for (let i = 0; i < intersects.length; i++) {
	let mesh = intersects[i];
	if (mesh.object.userData) {
		console.log(mesh.object.userData);
		return;
	}
}

The “slots” variable is a simple array of meshes added when I create the inventory UI elements. I’m attempting to drag my items’ meshes to slots in an inventory system.I’m trying to get the inventory slot mesh under the mouse when the dragend event ends.

Is there an obvious reason why it always returns the entire group, while mouse clicks return the intersected element correctly?

Any help would be appreciated.

2

Can you share the complete code related to this problem? Codepen, JSFiddle or here. I don’t understood how you created your group. Are you using: three.js docs and relating the event to this group?