360 camera problem

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.

Original Post on Discord

by user 368204675922657280

Have you seen this sample? Needle Engine Samples

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?

by user 368204675922657280

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.z += Math.PI / 2; //related to phone orientation - portrait //If set Scene is also inverted.
//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.

by user 368204675922657280

The part “If set Scene is also inverted” im talking about something like this, instead of this.

by user 368204675922657280

could you find a solution?

by user 680853402338721851

It would help to know what device you have issues with!

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

E.g. would help to know “Samsung S18, landscape mode, camera view is tilted right 90°” or so

I coudn’t make it work properly, so I decided to port AFrame´s look-controls bit by bit. Still testing…

by user 368204675922657280

Same question for you, which device/mode doesn’t work :slightly_smiling_face:

It was an Android Galaxy A72. I don’t think is a Device problem tho, more of a: “i don’t know how to fix the orientation” kind of problem.

by user 368204675922657280

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!