renderingGroupId and click detection

I have a box inside a sphere. I have modified the box renderingGroupId to have it rendered on top of the sphere.
The box also has an OnPickTrigger action but click events aren’t detected.

I have created a playground:
The box in the middle doesn’t reacts to click events unless the sphere is hidden.

Is there a way to have functioning click events if the box is rendered on top of the sphere?

Hey welcome!

You can use this code snippet to multiPick:

    scene.onPointerObservable.add((e) => {
        if (e.type === BABYLON.PointerEventTypes.POINTERDOWN) {
            const pickedMeshes = scene.multiPick(scene.pointerX, scene.pointerY);            

You get all the meshes picked in the pickedMeshes array. The only thing you need to do is implement your custom logic, for example you can sort the meshes by the value of renderingGroupId and process them in that order.

If you need more assistance just let me know.


1 Like

Thank you a lot.
I’ve implemented the workaround and it works fine: