OrbitControls is not a constructor

Question

I've been trying to make a WebVR environment for over a week now, my scene is rendered in three js but I can't seem to make the VR controls work.

I've tried:

Adding packages in my node_modules and importing them:

import threeOrbitControls from 'three-orbit-controls';
const OrbitControls = threeOrbitControls(THREE);
const controls = new THREE.OrbitControls(camera, element);

But this throws the error:

Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_three__.OrbitControls is not a constructor(…)

Some other modules I tried to import said THREE was undefined within the module because the function started with THREE., but I can't go in that module and just import THREE because if someone else runs npm install they will still get the same error.

I tried adding the scripts (and source code being downloaded) in my index.html, but also there THREE was undefined...

I'm out of guesses. I thought it was because of webpack and looked up for a WebVR webpack repository to look how that person handled it. I found this repository but when installing the packages and running webpack it said that WebVRManager is not a constructor. I honestly don't know what's going wrong here.

This is the (pretty messy by now) code I use to run my project.

import {sets} from './data/';

import * as THREE from 'three';
import threeOrbitControls from 'three-orbit-controls';
import ColladaLoader from 'three-collada-loader';
// import 'three-vrcontrols';
// import 'three-vreffect';
import threeStereoEffect from 'three-stereo-effect';

// import FirstPersonControls from 'three-first-person-controls';

// import DeviceOrientationControls from './modules/util/DeviceOrientationControls';

import webvrPolyfill from 'webvr-polyfill'; // eslint-disable-line no-unused-vars

// console.log(DeviceOrientationControls);

import io from 'socket.io-client';
import {isEmpty} from 'lodash';

import {BufferLoader} from './modules/sound';
import {SpawnObject} from './modules/render';
import {Controls} from './modules/util';

const OrbitControls = threeOrbitControls(THREE);
const StereoEffect = threeStereoEffect(THREE);

// const VRControls = new THREE.VRControls(camera);
// const VREffect = new THREE.VREffect();

let scene, camera, renderer, element, container, stereoEffect, vreffect, controls;
let audioCtx, bufferLoader;

let controlData;

let camX = 0;
const camY = 0;
let camZ = 2;

const camSpeed = .1;

const notes = [];
let devices = [];

const init = () => {

  this.socket = io(`/`);

  this.socket.on(`init`, handleWSInit);
  this.socket.on(`dataTransfer`, handleWSData);

  window.AudioContext = window.AudioContext || window.webkitAudioContext;

};

const handleWSInit = users => {
  const {id: socketId} = this.socket;

  users = users.map(u => {
    if (u.socketId === socketId) u.isMe = true;
    return u;
  });

  devices = users;

  if (window.location.href.indexOf(`controls`) > - 1) {
    const controls = new Controls(this.socket, devices);
    console.log(controls);
    return;
  }

  document.querySelector(`main`).classList.remove(`controls`);

  loadAudio();

};

const loadAudio = () => {
  audioCtx = new AudioContext();
  bufferLoader = new BufferLoader(audioCtx);

  bufferLoader.load(sets.drums)
    .then(data => spawnObject(data));

  initEnvironment();
};

const handleWSData = data => {
  if (data !== undefined || data !== null || isEmpty(data)) controlData = data;

  devices = devices.map(u => {
    u.yo = false;
    return u;
  });

};

const spawnObject = data => {

  for (let i = 0;i < 5;i ++) {
    const bol = new SpawnObject(`object.dae`, audioCtx, data[0], scene, false);
    notes.push(bol);
  }

  // console.log(notes);
};

const initEnvironment = () => {

  //Three.js Scene
  scene = new THREE.Scene();


  //Create renderer, set size + append to the container
  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  element = renderer.domElement;
  container = document.querySelector(`main`);
  container.appendChild(element);


  //Create camera, set position + add to scene
  camera = new THREE.PerspectiveCamera(
    45, window.innerWidth / window.innerHeight,
    1, 10000
  );
  camera.position.set(0, 0, 2);
  camera.lookAt(scene.position);


  //VR Controls
  // temporaryControls = new VRControls(camera);

  // vreffect = new VREffect(renderer);
  // vreffect.setSize(window.innerWidth, window.innerHeight);
  //
  // navigator.getVRDisplays().then(displays => {
  //   if (displays.length > 0) {
  //     const vrDisplay = displays[0];
  //     console.log(`jipse`);
  //   }
  //   //Kick off the render loop
  // });




      //Creates stereo effect
  stereoEffect = new StereoEffect(renderer);
  // stereoEffect.eyeSeparation = 15;
  // stereoEffect.setSize(window.innerWidth, window.innerHeight);

  console.log(stereoEffect);

  //Controls
  // new OrbitControls(camera);
  controls = new THREE.OrbitControls(camera, element);
  // camera.position.x = 100;
  // camera.position.y = 1000;
  // camera.position.z = 3000;


  //LIGHTS
  const light = new THREE.PointLight(0xFFFFFF);
  light.position.set(0, 0, 9);
  light.castShadow = true;
  light.shadow.mapSize.width = 1024;
  light.shadow.mapSize.height = 1024;
  light.shadow.camera.near = 10;
  light.shadow.camera.far = 100;
  scene.add(light);

  //FLOOR
  const matFloor = new THREE.MeshPhongMaterial();
  const geoFloor = new THREE.BoxGeometry(2000, 1, 2000);
  const mshFloor = new THREE.Mesh(geoFloor, matFloor);

  matFloor.color.set(0x212E39);
  mshFloor.receiveShadow = true;
  mshFloor.position.set(0, - 1, 0);

  scene.add(mshFloor);


  //ENVIRONMENT
  const loader = new ColladaLoader();

  loader.load(`../assets/environment.dae`, collada => {
    collada.scene.traverse(child => {
      child.castShadow = true;
      child.receiveShadow = true;
    });

    scene.add(collada.scene);
    render();
  });

};


// function setOrientationControls(e) {
//   if (!e.alpha) {
//     return;
//   }
//   controls = new THREE.DeviceOrientationControls(camera, true);
//   controls.connect();
//   controls.update();
//   element.addEventListener(`click`, fullscreen, false);
//   window.removeEventListener(`deviceorientation`, setOrientationControls, true);
// }
// window.addEventListener(`deviceorientation`, setOrientationControls, true);

const moveCamera = () => {
  notes.forEach(i => {
    i.audioCtx.listener.positionX.value = camX + window.innerWidth / 2;
    i.audioCtx.listener.positionZ.value = camZ + 300;
    i.audioCtx.listener.positionY.value = camY + window.innerHeight / 2;
  });

  switch (controlData) {
  case `up`:
    camZ -= camSpeed;
    break;
  case `down`:
    camZ += camSpeed;
    break;
  case `left`:
    camX -= camSpeed;
    break;
  case `right`:
    camX += camSpeed;
    break;
  }

  camera.position.set(camX, camY, camZ);
};

const render = () => {

  moveCamera();
  renderer.shadowMap.enabled = true;
  renderer.shadowMap.type = THREE.PCFSoftShadowMap;

  renderer.gammaInput = true;
  renderer.gammaOutput = true;

  renderer.setClearColor(0xdddddd, 1);
  stereoEffect.render(scene, camera);

  requestAnimationFrame(render);
};

// const fullscreen = () => {
//   if (container.requestFullscreen) {
//     container.requestFullscreen();
//   } else if (container.msRequestFullscreen) {
//     container.msRequestFullscreen();
//   } else if (container.mozRequestFullScreen) {
//     container.mozRequestFullScreen();
//   } else if (container.webkitRequestFullscreen) {
//     container.webkitRequestFullscreen();
//   }
// };

init();

Answer 1

I downloaded the source code, required it by doing require(./OrbitControls.js) and added module.exports = THREE.OrbitControls in the source code.

Answer 2

Please try to import your three-orbit-controls in that way:

const OrbitControls = require( 'three-orbit-controls' )( THREE );

It should work. I met the same issue like you did, and solution above worked. There seem to be something wrong with three-orbit-controls module exporting solution.