# Enable Orbitcontrols only when hovering over Objects

**URL:** <https://discourse.threejs.org/t/enable-orbitcontrols-only-when-hovering-over-objects/39379>\
**Category:** Questions\
**Tags:** orbit-controls\
**Created:** [June 18, 2022, 12:24pm UTC](https://discourse.threejs.org/t/enable-orbitcontrols-only-when-hovering-over-objects/39379 "2022-06-18T12:24:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![anhelmphono](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anhelmphono/32/33926_2.png) [@anhelmphono](https://discourse.threejs.org/u/anhelmphono)\
**Post date:** [June 18, 2022, 12:24pm UTC](https://discourse.threejs.org/t/enable-orbitcontrols-only-when-hovering-over-objects/39379/1 "2022-06-18T12:24:00Z")

</div>

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.  
https://codepen.io/anhelmphono/embed/preview/gOvygLj?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=gOvygLj

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?](https://discourse.threejs.org/t/how-to-orbitcontrols-only-over-object-and-not-on-entire-canvas/14652)  
But the mentioned solution doesnt reveal the way out.

Thanks for your help in Advance.  
Phono

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [June 20, 2022, 6:12am UTC](https://discourse.threejs.org/t/enable-orbitcontrols-only-when-hovering-over-objects/39379/2 "2022-06-20T06:12:53Z")

</div>

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](https://codesandbox.io/s/bouncy-watch-qyz5r?file=/src/App.js) otherwise the code is here [drei/PresentationControls.tsx at a1d24f19b61e74abd489338fbbdc63b2b6e8e667 · pmndrs/drei · GitHub](https://github.com/pmndrs/drei/blob/a1d24f19b61e74abd489338fbbdc63b2b6e8e667/src/web/PresentationControls.tsx)

---

<div class="post-metadata">

**Author:** ![anhelmphono](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/anhelmphono/32/33926_2.png) [@anhelmphono](https://discourse.threejs.org/u/anhelmphono)\
**Post date:** [July 4, 2022, 8:05am UTC](https://discourse.threejs.org/t/enable-orbitcontrols-only-when-hovering-over-objects/39379/3 "2022-07-04T08:05:16Z")

</div>

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.