无法使DeviceOrientationControls正常工作

我已经尝试了一个多星期，以获取智能手机的方向控制来控制我的三个js场景。我保存了一个放置在教程下的示例，但丢失了该教程，但找到了该示例。我研究了他如何使控件正常工作，但似乎无法获得相同的效果。我希望其他人可以发现它...

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

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