Three.js + OrbitControls – Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined

Tags: , , , ,

I am tryint to use OrbitControls in THREE.js. If I removed the line let cameraControl = new OrbitControls(camera) from below, there will be no error. But now, I have “Uncaught TypeError: Cannot read property ‘addEventListener’ of undefined”

I tried to change OrbitControls(camera) to THREE.OrbitControls(camera), and then I had “Uncaught TypeError: THREE.OrbitControls is not a constructor”.

I tried to import OrbitControls.js by using <script src=...></script> outside "module", instead of import {OrbitControls} from ...;, but it doesn’t work, I also tried to move let cameraControl = new OrbitControls(camera) to other lines, but also doesn’t work.

Any ideas how to fix?


<script type="module">
import * as THREE from '';
import {OrbitControls} from '';

let scene, renderer, camera
let cube

function init() {

  scene = new THREE.Scene()
  renderer = new THREE.WebGLRenderer()
  renderer.setSize(window.innerWidth, window.innerHeight)

  camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 100)

  let cameraControl = new OrbitControls(camera)

  camera.position.set(10, 10, 10)

  // cube
  cube = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1))


function render() {
  renderer.render(scene, camera)




let cameraControl = new OrbitControls(camera)

Always create the controls like so:

let cameraControl = new OrbitControls(camera, renderer.domElement);

The second parameter is mandatory now.

Source: stackoverflow