Device orientation controls transformed to face front camera

danrossi · December 20, 2024, 6:35pm

I know it’s been abandoned but I am trying to maintain a version for fullscreen on mobile. I am using a different sensor on Android to IOS and trying to make them work the same.

I can’t seem to figure out how to transform the alpha properties to match the front of the camera depending where the phone is directing. It always wants to face the one direction. I tried adding the camera rotation to transform with to get it’s original position. I thought I had it work but changing direction of the phone before starting it was offset to the left or right.

I’ve noticed this same problem going to XR but figured out a way to transform from the camera rotation and position. It will face the right way.

github.com

danrossi/three-vr-deviceorientation/blob/21669342c5738d8db03f1e918153fc00e292021a/src/DeviceOrientationControls.js#L134


      
          	}
          
          	onSensorRead() {
          		const q = this.sensor.quaternion;
          		_sensorQ.set(q[0], q[1], q[2], q[3]);
          
          		const out = _outQ;
          		out.copy(this.originalRotation);
          		//out.copy(SENSOR_TO_VR);
          		out.multiply(SENSOR_TO_VR);
          		out.multiply(_sensorQ);
          
          		_out[0] = out.x;
          		_out[1] = out.y;
          		_out[2] = out.z;
          		_out[3] = out.w;
          
          		//console.log("sensor", _out);
          
          		this.object.quaternion.fromArray(_out);
          		//this.object.quaternion.fromArray(this.sensor.quaternion);

github.com

danrossi/three-vr-deviceorientation/blob/21669342c5738d8db03f1e918153fc00e292021a/src/DeviceOrientationControls.js#L95


      
          	}
          
          	static get hasSensor() {
          		return "RelativeOrientationSensor" in window;
          	}
          
          	initOrientationSensor() {
          
          		if (DeviceOrientationControls.hasSensor) {
          			const options = { frequency: 60, referenceFrame: 'screen' };
          			const sensor = this.sensor = new RelativeOrientationSensor(options);
          			Promise.all([navigator.permissions.query({ name: "accelerometer" }),
          			navigator.permissions.query({ name: "gyroscope" })])
          				.then(results => {
          					//console.log("results ", results);
          					if (results.every(result => result.state === "granted")) {
          						this, sensor.start();
          						_onSensorReadRef = () => this.onSensorRead();
          						this.sensor.addEventListener('reading', _onSensorReadRef);
          
          					} else {

github.com

danrossi/three-vr-deviceorientation/blob/21669342c5738d8db03f1e918153fc00e292021a/src/DeviceOrientationControls.js#L70


      
          		//this.connect();
          	}
          
          	// The angles alpha, beta and gamma form a set of intrinsic Tait-Bryan angles of type Z-X'-Y''
          
          
          
          	setObjectQuaternion(quaternion, alpha, beta, gamma, orient) {
          
          		euler.set(beta, alpha, - gamma, 'YXZ'); // 'ZXY' for the device, but 'YXZ' for us
          		quaternion.copy(this.originalRotation);
          		deviceQuaternion.setFromEuler(euler);
          		quaternion.multiply(deviceQuaternion);
          		//quaternion.setFromEuler( euler ); // orient the device
          		quaternion.multiply(q1); // camera looks out the back of the device, not the top
          		quaternion.multiply(q0.setFromAxisAngle(zee, - orient)); // adjust for screen orientation
          	}
          
          
          
          	connect() {

Topic		Replies	Views
Inital Y Axi Rotation after applying THREE.DeviceOrientationControls on Camera Object Questions	0	554	January 23, 2019
Shifting orientation of a scene only on mobile Questions geometry	4	498	January 6, 2025
DeviceOrientation controls Lock view to Model and only use Subtle movement ? (like facebook 3d photo) Questions device-orientation	0	546	November 22, 2021
Match MCU orientation in browser Questions orbit-controls	5	311	January 19, 2023
Accurate device orientation tracking Questions webvr , webxr , mobile	0	1165	March 21, 2022

Device orientation controls transformed to face front camera

Related topics