The code below work fine for landscape mode 360 view. Link to check: https://metagrid1.sv.vt.edu/~swmohd/npolys/ICAT2021/ICAT2021/Stroubles_2021/_Multi1.html
but, I want this code to also work in case if it detects the device is in portrait mode.
Thanks in advance
<script>
var runtime = null;
var degreeToRadiansFactor = Math.PI / 180;
x3dom.fields.Quaternion.prototype.setFromEulerYXZ = function (alpha, beta, gamma) {
var c1 = Math.cos( alpha / 2 );
var c2 = Math.cos( beta / 2 );
var c3 = Math.cos( gamma / 2 );
var s1 = Math.sin( alpha / 2 );
var s2 = Math.sin( beta / 2 );
var s3 = Math.sin( gamma / 2 );
this.x = s1 * c2 * c3 + c1 * s2 * s3;
this.y = c1 * s2 * c3 - s1 * c2 * s3;
this.z = c1 * c2 * s3 - s1 * s2 * c3;
this.w = c1 * c2 * c3 + s1 * s2 * s3;
}
function deg2rad(deg){return deg * degreeToRadiansFactor;}
/* function added by sheeban for reference */
function handleOrientation(event) {
updateFieldIfNotNull('Orientation_a', event.alpha);
updateFieldIfNotNull('Orientation_b', event.beta);
updateFieldIfNotNull('Orientation_g', event.gamma);
incrementEventCount();
var V = document.getElementById('vp');
var degtorad = Math.PI / 180; // Degree-to-Radian conversion
var a = event.alpha * degtorad;
var b = event.beta * degtorad ;
var c = event.gamma * degtorad;
var q0 = x3dom.fields.Quaternion.axisAngle(new x3dom.fields.SFVec3f(0,0,1),-Math.PI/2);
// phone rotation offset
// works now in LANDSCAPE MODE !!!!!!!!!!!!!!!
/// note order and sign here !
var q = new x3dom.fields.Quaternion();
q.setFromEulerYXZ(b, a, -c); // our own implemented function
var q1 = new x3dom.fields.Quaternion.axisAngle(new x3dom.fields.SFVec3f(1,0,0),-Math.PI/2); // device orientation points upwards. rotate down to camera orientation
//
q = q.multiply(q1);
q = q.multiply(q0);
var aa = q.toAxisAngle();
//console.log(aa);
V.setAttribute("orientation", aa[0].x + " " + aa[0].y + " " + aa[0].z + " " + aa[1]);
}