Javascript OrbitControls不是构造函数

我已经尝试制作一个WebVR环境一个多星期了，我的场景是用三个js渲染的，但我似乎无法让VR控件工作

我试过：

在my node_模块中添加包并导入它们：

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

但这带来了一个错误：

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

我尝试导入的其他一些模块说，由于函数以

THREE.

开头，因此模块中未定义THREE，但我无法进入该模块并仅导入THREE，因为如果其他人运行

npm install

，他们仍会收到相同的错误

我尝试在index.html中添加脚本（以及正在下载的源代码），但也有三个未定义

我猜不到了。我认为这是因为webpack，并查找WebVR webpack存储库，以了解此人是如何处理它的。我发现，但在安装软件包和运行webpack时，它说WebVRManager不是构造函数。我真的不知道这里出了什么问题

这是我用来运行我的项目的代码（目前相当混乱）

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();

从“/data/”导入{set}；
从“三”中导入*作为三；
从“三个轨道控制”导入三个轨道控制；
从“三个胶圈装载机”进口胶圈装载机；
//进口"三控";；
//引进"三个效应",；
从“三立体效果”导入三立体效果；
//从“三个第一人称控件”导入第一人称控件；
//从“./modules/util/DeviceOrientationControl”导入DeviceOrientationControl；
从“webvr polyfill”导入webvrPolyfill；//eslint禁用行无未使用的变量
//console.log（设备定向控制）；
从“socket.io客户端”导入io；
从“lodash”导入{isEmpty}；
从“./modules/sound”导入{BufferLoader}；
从“./modules/render”导入{SpawnObject}；
从“./modules/util”导入{Controls}；
常数轨道控制=三个轨道控制（三个）；
常数立体效果=三立体效果（三）；
//const VRControls=新的三个VRControls（摄像头）；
//const VREffect=新的三个.VREffect（）；
让场景、摄影机、渲染器、元素、容器、立体效果、vreffect、控件；
让audioCtx，bufferLoader；
让我们控制数据；
设camX=0；
常数camY=0；
设camZ=2；
常数速度=.1；
常量注释=[]；
让设备=[]；
常量init=（）=>{
this.socket=io（`/`）；
this.socket.on（`init`，handlewsini）；
this.socket.on（`dataTransfer`，handleWSData）；
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
};
const handlewsini=用户=>{
const{id:socketId}=this.socket；
users=users.map（u=>{
如果（u.socketId==socketId）u.isMe=true；
返回u；
});
设备=用户；
if（window.location.href.indexOf（`controls`）>-1）{
const controls=新控件（this.socket，devices）；
控制台日志（控制）；
返回；
}
document.querySelector（`main`）.classList.remove（`controls`）；
loadAudio（）；
};
常量loadAudio=（）=>{
audioCtx=新的AudioContext（）；
bufferLoader=新的bufferLoader（audioCtx）；
缓冲装载机。装载（套。桶）
。然后（数据=>spawnObject（数据））；
initEnvironment（）；
};
const handleWSData=数据=>{
如果（数据！==undefined | | data！==null | | isEmpty（数据））控制数据=数据；
设备=设备。映射（u=>{
u、 yo=假；
返回u；
});
};
const spawnObject=数据=>{
for（设i=0；i<5；i++）{
const bol=new SpawnObject（`object.dae`，audioCtx，数据[0]，场景，false）；
注：推送（bol）；
}
//控制台日志（注释）；
};
常量initEnvironment=（）=>{
//3.js场景
场景=新的三个。场景（）；
//创建渲染器，设置大小并附加到容器
renderer=new THREE.WebGLRenderer（）；
renderer.setSize（window.innerWidth、window.innerHeight）；
元素=renderer.doElement；
container=document.querySelector（`main`）；
container.appendChild（元素）；
//创建摄影机，设置位置并添加到场景
摄像机=新的三视角摄像机(
45，window.innerWidth/window.innerHeight，
1, 10000
);
摄像机位置设置（0,0,2）；
摄像机。注视（场景。位置）；
//虚拟现实控制
//临时控制装置=新的VRC控制装置（摄像头）；
//vreffect=新的vreffect（渲染器）；
//vreffect.setSize（window.innerWidth、window.innerHeight）；
//
//navigator.getVRDisplays（）。然后（displays=>{
//如果（显示长度>0）{
//const vrDisplay=显示[0]；
//console.log（`jipse`）；
//   }
////启动渲染循环
// });
//创建立体效果
立体效果=新的立体效果（渲染器）；
//立体效果。眼睛分离=15；
//stereoEffect.setSize（window.innerWidth、window.innerHeight）；
console.log（立体效果）；
//控制
//新的轨道控制装置（摄像机）；
控件=新的三个控件（摄影机、元素）；
//摄像机位置x=100；
//摄像机位置y=1000；
//摄像机位置z=3000；
//灯光
常量灯=新的三点灯（0xFFFFFF）；
光。位置。设置（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；
场景。添加（灯光）；
//地板
const matFloor=新的三个网格材质（）；
const geoFloor=新的三箱几何结构（2000,1,2000）；
const mshFloor=新的三层网格（土工地板、金属地板）；
matFloor.color.set（0x212E39）；
mshFloor.receiveShadow=true；
mshFloor.position.set（0，-1,0）；
场景。添加（mshFloor）；
//环境
const loader=新的ColladaLoader（）；
loader.load（`../assets/environment.dae`，collada=>{
collada.scene.transverse（子项=>{
child.castShadow=true；
child.receiveShadow=true；
});
scene.add（collada.scene）；
render（）；
});
};
//功能设置方向控制（e）{
//如果（！e.alpha）{
//返回；
//   }
//控件=新的三个。设备方向控件（摄像头，真）；
//控件。connect（）；
//控件更新（）；
//元素。addEventListener（`click`，全屏，false）；
//removeEventListener（`deviceorientation`，SetOrientationControl，tr