Mobile gyroscope for three.js

Hi

I just observe one of your project that made base on three.js :
https://mrdoob.com/#/131/clouds

I wonder if you have any version of solution for that example or something that work and move base on mobile gyroscope.

thanks

Are you looking for controls similar to the following official example?

https://threejs.org/examples/misc_controls_deviceorientation

If so, I suggest you make use of THREE.DeviceOrientationControls in your app.

all i want is : on that link when you move your mouse pointer the sky moving right on mouse direction

Now I want to add something to that script, when the customer moves her cell phone using Gyro or something like that, the direction of movement in the sky will change to the same direction

Um, I think you should give THREE.DeviceOrientationControls a try. It looks like it could produce the behavior what you are looking for.

I just added this code to the end of init() function

if (window.DeviceOrientationEvent) {
    window.addEventListener('deviceorientation', function (eventData) {


        var tiltX = Math.round(eventData.gamma * 2 );


        var tiltY =  Math.round(eventData.beta * 2);

        deviceOrientationHandler(tiltX,tiltY);

    }, false);
}

function deviceOrientationHandler(tiltX, tiltY){

      mouseX = tiltX;
      mouseY = tiltY;
}

and everything works fine on mobile by gyroscope.
I don’t know if there is better solution for this issue or not.

1 Like