Не удается заставить DeviceOrientationControls работать

Question

Я уже более недели проработал, чтобы получить контроль ориентации моего смартфона, чтобы контролировать мою трехмерную сцену js. Я сохранил пример, который был помещен под учебник, я потерял учебник, но нашел пример. Я посмотрел, как ему удалось заставить управление работать, и я не могу получить такой же эффект. Я надеюсь, что кто-то может заметить это ...

Это мой script.js (я загружаю threejs через КДС в моей index.html)

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

Answer 1

Я не знаю, как я установил его , но я не использовал функцию вокруг определения DeviceOrientationControls, вместо этого я использовал регулярное выражение, чтобы проверить, находится ли я в браузере или на мобильном устройстве.

Это похоже на работу.