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

[Elton-Ge]

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

Excuse me, in your txt file, what's the 'object' parameter? how can I use this deviceorientationconrol? Sincerely look forward to your reply.
Thanks a lot.

[jtreat3]

IIRC, the object was the instance returned when instantiating DeviceOrientationControls.

…

On Tue, Aug 30, 2022 at 7:18 PM EG ***@***.***> wrote: I finally got it 100% right. Users can drag left-right as well as up-down, without messing up device orientation. DeviceOrientationControls.js.txt <https://github.com/mrdoob/three.js/files/2822218/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 ); } Excuse me, in your txt file, what's the 'object' parameter? how can I use this deviceorientationconrol? Sincerely look forward to your reply. Thanks a lot. — Reply to this email directly, view it on GitHub <#9047 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AEN5EZR2PKCR7H4ZSGC2L6LV32XF3ANCNFSM4CFNMR2A> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- Jay Treat