OrbitControls and DeviceOrientationControls

Hi , is there anyway to enable both DeviceOrientationControls and OrbitControls to use pan and orientation on mobile ?
Here is my actual code:

// Controls gyroscope
orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
orbitControls.target.set(camera.position.x - 1, camera.position.y, camera.position.z);
clock = new THREE.Clock();
resize();
window.addEventListener("deviceorientation", deviceOrientationListener, false);
window.addEventListener("resize", resize, false);

var deviceOrientationListener = function(e) {
    if (!e.alpha) {
        return;
    }   
    orbitControls = new THREE.DeviceOrientationControls(camera, true);
    orbitControls.connect();
    orbitControls.update();
    resize();
    window.removeEventListener("deviceorientation", deviceOrientationListener);
};

var loop = function() {
        requestAnimationFrame($.proxy(loop, this));
        orbitControls.update(clock.getDelta());
        if (stereoEffect) {
            stereoEffect.render(scene, camera);
        } else {
            renderer.render(scene, camera);
        }
        TWEEN.update(); 
        Reticulum.update();
        videoTexture.update();      
};

Thank you for this amazing library by the way !

Author: Fantashit

2 thoughts on “OrbitControls and DeviceOrientationControls

  1. like if you place the camera into empty object3d, have device orientation apply to the camera, and orbit controls to object3d?

  2. I finally got it 100%% right.
    Users can drag left-right as well as up-down, without messing up device orientation.
    DeviceOrientationControls.js.txt

    I won’t include my full project, but using the attached control file, you just need to track the user’s finger-adjusted lat/lon (in degrees) and pass it along.
    function animate(time) { requestAnimationFrame( animate ); controls.update(lon, lat); renderer.render( scene, camera ); }

Comments are closed.