Shifting orientation of a scene only on mobile

[nandanimal]

I’m using three.js and DeviceMotion events to make a 3d gallery, where camera rotation on mobile is determined by device rotation (alpha, beta, gamma). Everything works as intended, except I want to change the “base” state from phone laying face up in portrait to phone being held up in portrait.

Here’s a very crude drawing of what I mean:

And here’s my code:

if (isMobile && !/iPad|Macintosh/i.test(navigator.userAgent)) {
            camera.position.set(0, 0, 0);

            // Mobile device controls (using device orientation)
            window.addEventListener("deviceorientation", (event) => {
                const alpha = (event.alpha * Math.PI) / 180;
                const beta = (event.beta * Math.PI) / 180;
                const gamma = (event.gamma * Math.PI) / 180;

                var euler = new THREE.Euler(beta, gamma, alpha, "YXZ"); // ' is the order of rotations

                // console.log(
                //     `DeviceOrientationEvent: alpha ${alpha}, beta ${beta}, gamma ${gamma}`
                // );

                var quaternion = new THREE.Quaternion();
                quaternion.setFromEuler(euler);
                camera.setRotationFromQuaternion(quaternion);
            });

            // Disable OrbitControls 
            controls.enabled = false;
        }

I’ve tried applying a shift to the alpha/beta/gamma values, as well as rotating the whole scene, but both seem to break the rotation. I apologize if the solution is really simple, I’m not the best with geometry

[jack04]

Hello @nandanimal ,

Please provide files & more details to check it more precisely please DM with details.

Feel free to reach out:

jack@technogiq(dot)com
Skype: live:.cid.a0f06a69cf1c6478

Looking forward to hearing from you.

Regards,
Jack Smith

[manthrax]

@nandanimal

    let fixup = new THREE.Quaternion().setFromEuler(new THREE.Euler(Math.PI*.5,0,0));

                camera.setRotationFromQuaternion(quaternion);

camera.quaternion.multiply(fixup)

Maybe something like that ^ ?

[JacksonUptain]

So I see that you disabled the orbit controls. Idk why you have orbit controls in the first place if you’re simply using event listeners for device orientation to position the camera and orientation.

Maybe I don’t understand enough…but try removing/ messing with the orbit controls.

If you don’t really want to do that just keep whatever code you have right now, and just change the entire scenes rotation.

I wouldn’t consider myself a master at Three Js, but I do a bit of OpenGl graphics programming, and in that case, you move the scene not the camera.

More info would be appreciated. Sorry if I wasn’t helpful. Hope you figure it out. Thanks!

Keep problem solving! -Jackson