Hi! I was thinking about making a small scene with a camera controlled by the phones gyroscope, with a constraint in its rotation (so that it only looks for, lets say 90 degrees left and right, and 45 degrees up and down).
I checked up the samples and I think the closest one is the “Room Tracking & Passthrough” but without the camera feed (i only want to display the scene). Yet I’m a bit lost since I only plan to use the gyroscope function and don’t know if its worth to work with WebXR instead of the sensor API directly.
Now the thing is, I tried using the Sensor API first, but I’m not very good at dealing with rotations (Rotation matrixes and/or quaternions) so I couldn’t find a way to correctly orient it to look “forward” to the scene.
I would appreciate if someone can give some advice, suggestion or point me up to the right direction. Anything helps!
PD: would be nice to have a sample for this case scenario too, I know that AFrame have a pre-defined camera behavior like that.
Hi! yes, i used the code inside the component that rotates the cube, but the problem is that by default the orientation seems like its incorrect (maybe i broke it).
I uploaded it to glitch: https://somber-relic-jelly.glitch.me/
As it is right now, it looks at the center of the scene when you orient the cellphone up, the horizontal axis looks like it works just fine.
If I’m not mistaken, I should apply some sort of offset correct?
Ill Explain a little further:
This is how the code looks in the component provided in the “device-sensors” sample:
// attach to the sensor and apply to our object
sensor.addEventListener('reading', () => { this.gameObject.quaternion.fromArray(sensor.quaternion).invert(); //Scene is looking up
//this.gameObject.quaternion.fromArray(sensor.quaternion);//Scene is looking up
euler.setFromQuaternion(this.gameObject.quaternion);
euler.z += Math.PI / 2; //related to phone orientation - portrait //If set Scene is also inverted.
this.gameObject.quaternion.setFromEuler(euler);
//console.log(`Final euler values are X: ${euler.x * MathUtils.RAD2DEG}, Y: ${euler.y * MathUtils.RAD2DEG}, Z: ${euler.z * MathUtils.RAD2DEG}`)
//Set orientation.
// this.setOrientationLabel();
});
Note: I commented the relevant parts for this.
The thing is, right now if i just apply this to the camera, as is, the result works, but, in order to view the scene you have to look up (that is your phone looking up in real world).
Obviously this is not what i want.
We’re trying to normalize the rotations as returned by various devices so that they “make sense” for e.g. 360° viewing, but there may be edgecases on specific devices and modes that we’re missing
We definitely want you to not have to worry about that when using our sample component! That’s kind of the point, abstracting these differences away
Thanks for the device info!
