Enable Orbitcontrols only when hovering over Objects

Questions
1

Hello folks,

I am still kind of new to three.js but its fun and I am gaining experience quickly.
However I am struggling with some TouchEvents (PointerEvents API) in a particular case:

My goal is to let the user orbit/ rotate around an object only if hovering over it.

In a Desktop-View it works mostly fine (I am confident to succeed) but there are some principal issues on mobile. I assume its because of the PointerEvent API and its given Events ("pointermove, "“pointerdown”, “pointerup”, so on). I guess when orbitting (via “pointermove”) there is no constant update on the raycaster.intersections?!

I found this topic once here: How to OrbitControls only over object and not on entire Canvas?
But the mentioned solution doesnt reveal the way out.

Thanks for your help in Advance.
Phono

2

orbitcontrols control the camera which now circles around a target point, it does not care about single objects. you would usually write your own object specific implementation that couples raycast with a rotation, i think that’s the conclusion in the post you linked, too.

if you pair three with react there’s a component for it: Bouncy watch - CodeSandbox otherwise the code is here drei/PresentationControls.tsx at a1d24f19b61e74abd489338fbbdc63b2b6e8e667 · pmndrs/drei · GitHub

3

Yes raycasting works well in desktop-mode. I am referring to mobile view: Touch Events wont work quiet as expected.

Your Reference is very interessting for other purposes.