help: using the onPointerDown event of a` <group/>` and the event.handlers of `useThree()` together about react-three-fiber

[dusunax]

Note

I've checked the documentation and resolved the issue myself.
so self close Issue & sharing this troubleshooting for anyone who might be facing the same problem.

Category	Content
Cause	Lack of understanding of (1)3D event propagation, (2)the library in use (R3F)
Solution	Thoroughly read the official documentation & source code (as always, the best solution). react-three-fiber: events, events.ts

---

Registering the onPointerDown event

• without replacing the event in useThree❌, attaching an onPointerDown event to the canvas⭕️ does not affect the group's onPointerDown event trigger
  • and the event propagates in the order of <canvas /> → <group />

In 3D, because one can occlude another (differently from DOM), it operates differently.

• Bubbling starts from the object closest to the camera.
• Propagates through all objects intersecting with the ray as intersections.
• event.stopPropagation() not only prevents bubbling to ancestors but also to objects behind.
  • If a pointerover event is passed - a pointerout event is immediately triggered.

Problem no.2

• currently, my component is wrapped in the following wrapper format

return(
    <CanvasWrapper>
        <Canvas> // R3F canvas
            <LoadingSuspense>
                <CanvasContents> // Contains the onPointerDown logic
                <CanvasHTMLElements> // HTML elements not in 3D 
            </LoadingSuspense>
        </Canvase>
    </CanvasWrapper>
)

• however, to move onPointerDown to canvas, the useThree hook must be used outside the Canvas
  • useThree must be used inside the Canvas
    
• Therefore, passing a ref or using a global store was considered

Conclusion: use onPointerUp instead.

• while considering how to move onPointerDown, I examine onPointerUp as well.
  • It turns out the logic of onPointerUp was just toggling the archball rotate start/end state
• handles the user's pointer events with onPointerUp instead of onPointerDown
  • executes the operation of onPointerUp in handleModelClick together
• 👉however, when onPointerUp occurs outside the group, the original onPointerUp logic does not operate same, so onPointerUp need to registered with the <Canvas />
  • since onPointerDown is being used with a hook, onPointerUp's position is moved and replaced for use.