OrbitControlsはコンストラクタではありません

Question

私は1週間以上WebVR環境を作ろうとしていましたが、私のシーンは3つのjでレンダリングされましたが、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.で始まったので3つはモジュール内で定義されていませんでしたが、他の人が0を実行すると3つだけインポートすることはできませんでも同じエラーが発生します。

私は、スクリプトを追加してみました（とソースコードがダウンロードされている）私のindex.htmlにするだけでなく、そこにTHREEは...私は推測の外だ

未定義でした。私はそれがウェブパックのためだと思って、WebVR Webpackリポジトリを調べて、その人がどのようにそれを処理したかを調べました。私はthis repositoryを見つけましたが、パッケージをインストールして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

ソースコードをダウンロードしました。require(./OrbitControls.js)を実行してソースコードを追加し、ソースコードにmodule.exports = THREE.OrbitControlsを追加しました。

Answer 2

そのように、あなたの三軌道コントロールをインポートしてみてください：それは動作するはずです

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

。私はあなたのように同じ問題に遭遇し、上記の解決策が働いた。 3軌道制御モジュールの輸出ソリューションに問題があるようです。