# \[SOLVED\] Requesting help with OrbitControls

**URL:** <https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109>\
**Category:** Questions\
**Tags:** camera-controls\
**Created:** [March 13, 2018, 2:48pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109 "2018-03-13T14:48:44Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Remy\_RM](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@Remy\_RM](https://discourse.threejs.org/u/Remy_RM)\
**Post date:** [March 13, 2018, 2:48pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/1 "2018-03-13T14:48:44Z")

</div>

Dear reader,

I have recently started using three.js and am trying to get a camera with orbit controls to work as given in the [panorama cube](https://threejs.org/examples/#webgl_panorama_cube) example. However when I try to implement it I run into some issues, none of which return an error in the console, and as far as i’m aware i repeat the steps given in the example.

I instantiate my orbit controller as followed: [https://pastebin.com/cXyHGV4u](https://pastebin.com/cXyHGV4u)

in the pastebin i use `new THREE.OrbitControls( camera, renderer.domElement);`, but when i click and drag nothing happens. i have tried adjusting this to `canvas.domElement` which changes the position and rotation of the camera to NaN when i click and drag.

in the example i had autoRotate enabled to see if that worked, but that doesn’t do anything either. i have also tried it with autoRotate disabled

i have made sure that OrbitControls,js is properly loaded. and am also receiving logs from it ( [Violation] Added non-passive event listener to a scroll-blocking ‘wheel’ event. Consider marking event handler as ‘passive’ to make the page more responsive. ) but that shouldn’t be the issue here.

Any help would be greatly appreciate.

Thanks for your time!  
~Remy

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 13, 2018, 3:02pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/2 "2018-03-13T15:02:39Z")

</div>

I’ve created a fiddle with most of your code for testing purposes: [https://jsfiddle.net/f2Lommf5/3050/](https://jsfiddle.net/f2Lommf5/3050/)

Seems to work so far. Maybe there is missing something in the code that causes your problem.

---

<div class="post-metadata">

**Author:** ![Remy\_RM](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@Remy\_RM](https://discourse.threejs.org/u/Remy_RM)\
**Post date:** [March 13, 2018, 3:14pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/3 "2018-03-13T15:14:15Z")

</div>

Could the issue be with the fact that i am using ‘canvas’ instead of ‘window’?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 13, 2018, 3:17pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/4 "2018-03-13T15:17:44Z")

</div>

Um, the handling of the canvas element does not look correctly in your pastebin. Try it like this: [https://jsfiddle.net/f2Lommf5/3054/](https://jsfiddle.net/f2Lommf5/3054/)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [March 13, 2018, 3:21pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/5 "2018-03-13T15:21:37Z")

</div>

You have to pass the canvas element to the constructor of `WebGLRenderer`. Otherwise the renderer internally creates its own canvas element.

---

<div class="post-metadata">

**Author:** ![Remy\_RM](https://avatars.discourse-cdn.com/v4/letter/r/c2a13f/32.png) [@Remy\_RM](https://discourse.threejs.org/u/Remy_RM)\
**Post date:** [March 13, 2018, 3:24pm UTC](https://discourse.threejs.org/t/solved-requesting-help-with-orbitcontrols/2109/6 "2018-03-13T15:24:45Z")

</div>

I see, this has indeed fixed my issue! thanks alot for your quick and clear replies!