I've been working on creating a WebVR environment for the past week using Three.js, but I'm having trouble getting the VR controls to function correctly.
Here are some of the things I've tried:
1. 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);
However, this resulted in the error:
Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_1_three__.OrbitControls is not a constructor(…)
When attempting to import other modules, I encountered issues where THREE was undefined within the module due to the function starting with THREE.. Importing THREE directly into the module was not a viable solution as it would lead to the same error if someone else ran npm install.
I also attempted adding scripts and source code directly into my index.html file, but even there THREE remained undefined...
After exhausting all my options, I suspected the issue might be related to webpack. I searched for a WebVR webpack repository to see how others had tackled similar problems. I came across this repository, but upon installing the packages and running webpack, it returned an error stating that WebVRManager is not a constructor. I am at a loss for what could be causing these issues.
Below is the current (quite messy) code I am using for my project.
// code goes here