# OrbitControls does not work

**URL:** <https://discourse.threejs.org/t/orbitcontrols-does-not-work/47142>\
**Category:** Questions\
**Tags:** orbit-controls\
**Created:** [January 21, 2023, 1:45pm UTC](https://discourse.threejs.org/t/orbitcontrols-does-not-work/47142 "2023-01-21T13:45:35Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![HasanTheSyrian](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hasanthesyrian/32/29432_2.png) [@HasanTheSyrian](https://discourse.threejs.org/u/HasanTheSyrian)\
**Post date:** [January 21, 2023, 1:45pm UTC](https://discourse.threejs.org/t/orbitcontrols-does-not-work/47142/1 "2023-01-21T13:45:35Z")

</div>

I’m trying to restructure my app with [this](https://github.com/kekkorider/threejs-starter), but I can’t get `OrbitControls` to work.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/0/a/0ad381eab3a3d1634e142336224ac29e8337efb1.jpeg)

```javascript
...

import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

...

  constructor(canvas, opts = { physics: false, debug: false }) {
    // this.canvas = document.querySelector(canvas);
    this.canvas = document.getElementById("three");
    this.screen = new Vector2(this.canvas.clientWidth, this.canvas.clientHeight);

   ...
  }

  #createControls() {
    // this.controls = new OrbitControls(this.camera, this.renderer.domElement);
    this.controls = new OrbitControls(this.camera, this.canvas);
    // this.controls.target = this.shadedBox;

    // both point to the same DOM element
    console.log(this.renderer.domElement);
    console.log(this.canvas);
  }

  #createRenderer() {
    this.renderer = new WebGLRenderer({
      alpha: true,
      antialias: window.devicePixelRatio === 1,
      canvas: this.canvas,
    });

...

```

[js file](https://hastebin.com/bibidecice.kotlin)

```plaintext
...
<div id="threeContainer">
  <canvas id="three"></canvas>
</div>
...

```

I tried changing the camera and the canvas source, moving the canvas’ z-index, and removing all front-end styling.

I’m not sure how he is updating the controls, [but it works in his version](https://threejs-starter-demo.netlify.app/).