我已经尝试制作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.
开头,但是我无法进入该模块并仅导入三个,因为如果其他人运行npm install
,它们仍然会得到相同的结果错误。我尝试将脚本(和正在下载的源代码)添加到index.html中,但是还有三个未定义...
我没话说我以为是因为webpack的缘故,并寻找了一个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();
最佳答案
我下载了源代码,通过执行require(./OrbitControls.js)
进行了要求,并在源代码中添加了module.exports = THREE.OrbitControls
。
关于javascript - OrbitControls不是构造函数,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41132839/