Javascript Can'；I don’我不能让设备定向控制器工作

我已经试了一个多星期了，想让我的智能手机的方向控制来控制我的三个js场景。我保存了一个放在教程下的示例，我丢失了教程，但找到了示例。我看了看他是如何让控制装置工作的，我似乎不能得到同样的效果。我希望其他人能发现它

这是我的script.js（我在index.html中通过cdn加载threejs）

从“/data/”导入{set}；
从“三个轨道控制”导入三个轨道控制；
从“三个胶圈装载机”进口胶圈装载机；
从“三立体效果”导入三立体效果；
//从“三个第一人称控件”导入第一人称控件；
const DeviceOrientationControls=require（`./modules/util/DeviceOrientationControls`）；
从“./modules/sound”导入{BufferLoader}；
从“./modules/render”导入{SpawnObject}；
常数轨道控制=三个轨道控制（三个）；
常数立体效果=三立体效果（三）；
让场景、摄影机、渲染器、元素、容器、控件；
让audioCtx，bufferLoader；
常量注释=[]；
设立体效果=null；
常量init=（）=>{
window.AudioContext=window.AudioContext | | window.webkitadiocontext；
audioCtx=新的AudioContext（）；
bufferLoader=新的bufferLoader（audioCtx）；
缓冲装载机。装载（套。桶）
。然后（数据=>spawnObject（数据））；
initEnvironment（）；
};
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）；
摄像机。注视（场景。位置）；
//创建立体效果
立体效果=新的立体效果（渲染器）；
stereoEffect.setSize（window.innerWidth、window.innerHeight）；
//控制
控制装置=新的轨道控制装置（摄像机）；
//控件=新的三个控件（摄影机、元素）；
//摄像机位置x=100；
//摄像机位置y=1000；
//摄像机位置z=3000；
const setOrientionControl=e=>{
如果（！e.alpha）{
返回；
}
控件=新的三个。设备方向控件（摄像头，真）；
控件。connect（）；
控件更新（）；
元素。addEventListener（`click`，全屏，false）；
removeEventListener（`deviceorientation`，setOrientationControl，true）；
};
addEventListener（`deviceorientation`，setOrientationControl，true）；
//灯光
常量灯=新的三点灯（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；
场景。添加（灯光）；
//恒半球光=新的三个半球光（0xffffff，0xffffff，0.6）；
//半光.彩色.setHSL（0.6,1,0.6）；
//半光底色setHSL（0.095,1,0.75）；
//半光位置设置（0500,0）；
//场景。添加（半光）；
//
//常数dirLight=新的三个方向光（0xffffff，1）；
//dirLight.color.setHSL（0.1,1,0.95）；
//dirLight.position.set（-1,1.75,1）；
//直射位置多重标度（50）；
//场景。添加（dirLight）；
//dirLight.castShadow=true；
//地板
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，true）；
}
addEventListener（`deviceorientation`，setOrientationControl，true）；
常量渲染=（）=>{
renderer.shadowMap.enabled=true；
renderer.shadowMap.type=THREE.PCFSoftShadowMap；
renderer.gammaInput=true；
renderer.gammaOutput=true；
渲染器.setClearColor（0xDDDD，1）；
立体效果。渲染（场景、摄影机）；
请求动画帧（渲染）；
};
函数全屏（）{
if（container.requestFullscreen）{
container.requestFullscreen（）；
}else if（container.msRequestFullscreen）{
container.msRequestFullscreen（）；
}else if（container.mozRequestFullScreen）{
container.mozRequestFullScreen（）；
}else if（container.webkitRequestFullscreen）{
container.webkitRequestFullscreen（）；
}
}
init（）；

我不确定我是如何修复的，但我没有在定义DeviceOrientationControl时使用该函数，而是使用正则表达式检查我是在浏览器上还是在移动设备上

---

这似乎有效。

请您花几分钟时间将此移到JSFIDLE或codepen，这将增加其他人能够提供帮助的机会。你说得对，我应该这么做@oqx@oqx有没有一种简单的方法可以做到这一点，因为我使用的是从我的node_模块导入的内容？。。。

import {sets} from './data/';

import threeOrbitControls from 'three-orbit-controls';
import ColladaLoader from 'three-collada-loader';
import threeStereoEffect from 'three-stereo-effect';
// import FirstPersonControls from 'three-first-person-controls';

const DeviceOrientationControls = require(`./modules/util/DeviceOrientationControls`);

import {BufferLoader} from './modules/sound';
import {SpawnObject} from './modules/render';

const OrbitControls = threeOrbitControls(THREE);
const StereoEffect = threeStereoEffect(THREE);

let scene, camera, renderer, element, container, controls;
let audioCtx, bufferLoader;

const notes = [];
let stereoEffect = null;

const init = () => {
  window.AudioContext = window.AudioContext || window.webkitAudioContext;

  audioCtx = new AudioContext();
  bufferLoader = new BufferLoader(audioCtx);

  bufferLoader.load(sets.drums)
    .then(data => spawnObject(data));

  initEnvironment();

};

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


      //Creates stereo effect
  stereoEffect = new StereoEffect(renderer);
  stereoEffect.setSize(window.innerWidth, window.innerHeight);

  //Controls
  controls = new OrbitControls(camera);
  // controls = new THREE.OrbitControls(camera, element);
  // camera.position.x = 100;
  // camera.position.y = 1000;
  // camera.position.z = 3000;

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


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

  // const hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6);
  // hemiLight.color.setHSL(0.6, 1, 0.6);
  // hemiLight.groundColor.setHSL(0.095, 1, 0.75);
  // hemiLight.position.set(0, 500, 0);
  // scene.add(hemiLight);
  //
  // const dirLight = new THREE.DirectionalLight(0xffffff, 1);
  // dirLight.color.setHSL(0.1, 1, 0.95);
  // dirLight.position.set(- 1, 1.75, 1);
  // dirLight.position.multiplyScalar(50);
  // scene.add(dirLight);
  // dirLight.castShadow = true;


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

};

controls = THREE.DeviceOrientationControls;
console.log(controls);

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 render = () => {

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

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