OrbitControls 不是构造函数

Question

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

我试过：

在我的 node_modules 中添加包并导入它们：

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，因为如果其他人运行s npm install 他们仍然会得到同样的错误。

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

我猜不透。我认为这是因为 webpack，并查找了一个 WebVR webpack 存储库，看看那个人是如何处理它的。我发现 this repository 但是在安装包和运行ning 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();

Answer 1

请尝试以这种方式导入您的三轨道控件：

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

应该可以。我遇到了和你一样的问题，上面的解决方案有效。三轨控模块导出方案好像有问题

Answer 2

我下载了源代码，通过require(./OrbitControls.js)需要它并在源代码中添加了module.exports = THREE.OrbitControls。

OrbitControls 不是构造函数

OrbitControls is not a constructor

javascript

three.js

webvr