Select / Deselect Multiple Objects

[neilgamb]

I have created a codesandbox code sample that illustrates a problem I am trying to solve —

Is there a way to call the onClear() method in App() by listening to a click event on the background / canvas. I would like the user to be able to clear / reset their selection by clicking outside of the model.

• I have looked into the onPointerMissed callback but this doesn't work because the user needs to be able to select multiple objects and this is called on selected objects following the selection of an additional object.

• My only other attempt included adding a very large sphere around the object onto which I could add an onClick event but wasn't able to get the click event to register to the inside of the sphere.... if that makes sense (in my actual app I am using Orbit controls which as I understand moves the camera relative to the scene/object — hence why I tried with a sphere and not just a plane in the background, which I think would work in this code sample).

I am fairly new to three / r3f and 3D dev in general so feel like there is a simple solution to this that I am just not seeing.

Many thanks in advance!

[drcmda]

https://docs.pmnd.rs/react-three-fiber/API/canvas

<Canvas onPointerMissed={onClear}>