OrbitControls does not work

Questions
1

I’m trying to restructure my app with this, but I can’t get OrbitControls to work.

image
image1916×1038 122 KB 

...

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

...
<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.