Three.js: OrbitControls and DeviceOrientationControls

[kbjz]

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 !

[makc]

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

[morandd]

for reference, a solution seems to be here:

http://stackoverflow.com/questions/35283320/three-js-rotate-camera-with-both-touch-and-device-orientation

[jtreat3]

I've been struggling with this for days. I've got a 98% solid solution.

On drag, I update lon and lat:

function onMouseMove( event ) {
    lon = ( event.clientX - onPointerDownPointerX ) * dragSpeed + onPointerDownLon;
    lat = ( event.clientY - onPointerDownPointerY ) * dragSpeed + onPointerDownLat;
}

In my animate function, I assign lon/lat to alphaOffset and betaOffset.

function animate(time) {
        requestAnimationFrame( animate );

        if (!gyroPresent && !manualMove)    lon += .15;
        lat = Math.max( - 85, Math.min( 85, lat ) );
        controls['alphaOffset'] = lon;
        controls['betaOffset'] = lat;
        controls.update();
        renderer.render( scene, camera );
}

Then in DeviceOrientationControls, I offset the data from the device with those numbers.

    this.update = function () {
        if ( scope.enabled === false ) return;
        if ( !scope.deviceOrientation ) {           
            scope.deviceOrientation = {alpha:90, beta:90, gamma:0};
            scope.screenOrientation = 0;
        }

        var device = scope.deviceOrientation;
        var alpha = THREE.Math.degToRad( device.alpha + scope.alphaOffset ); // Z
        var beta = THREE.Math.degToRad( device.beta + scope.betaOffset ); // X'
        var gamma = THREE.Math.degToRad( device.gamma + scope.gammaOffset ); // Y''
        var orient = THREE.Math.degToRad( scope.screenOrientation ); // O

        setObjectQuaternion( scope.object.quaternion, alpha, beta, gamma, orient );
    };

[mattrei]

@jtreat3 do you have a complete example? Thx!

[jtreat3]

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