{"id":1606,"date":"2017-02-09T23:29:30","date_gmt":"2017-02-10T04:29:30","guid":{"rendered":"https:\/\/rpchurchill.com\/?p=1606"},"modified":"2017-02-22T19:18:04","modified_gmt":"2017-02-23T00:18:04","slug":"webgl-incorporating-device-orientation","status":"publish","type":"post","link":"https:\/\/rpchurchill.com\/wordpress\/posts\/2017\/02\/09\/webgl-incorporating-device-orientation\/","title":{"rendered":"WebGL: Incorporating Device Orientation"},"content":{"rendered":"

At last night’s DCJS<\/a> Meetup (specifically Sean’s talk referencing this<\/a>) I learned that a means of reading the 3D orientation of a device has been readily available for some time. Description<\/a>s were not hard to find.<\/p>\n

Setting up the listener is easy enough. The window.DeviceOrientationEvent<\/code> test will actually pass on a lot of devices, including my laptop, even if they don’t actually fire off the update events, therefore I initialize the angles to null and use them as a test for updating the camera orientation.<\/p>\n

\r\n      \/\/VR controls viewing direction\r\n      var lookAngleX;\r\n      var lookAngleY;\r\n      var lookAngleZ;\r\n      \r\n      if (!window.DeviceOrientationEvent) {\r\n        alert(\"no gyro\");\r\n      }\r\n      lookAngleX = null;\r\n      lookAngleY = null;\r\n      lookAngleZ = null;\r\n      \r\n      function handleOrientation(event) {\r\n        lookAngleX = event.beta;\r\n        lookAngleY = event.gamma;\r\n        lookAngleZ = event.alpha;\r\n      }\r\n      \r\n      window.addEventListener(\"deviceorientation\", handleOrientation);\r\n<\/pre>\n
If the orientation events don’t fire then I let the camera move and continue to look at the origin of the scene as before but if the events to fire I stop the camera from moving and update its orientation in space instead.  The 90 degree adjustment for rotation around the X-axis was something I added to make the view make sense.  That may be an artifact of the coordinate system I set up.  An additional adjustment may be necessary on Firefox on some devices.<\/a><\/p>\n
\r\n        \/\/update location of viewport camera\r\n        camera.position.set(x,y,z);\r\n        if (lookAngleX == null) {\r\n          camera.lookAt(global3DLookTarget);\r\n        } else {\r\n          camera.rotation.x = (lookAngleX - 90.0) * Math.PI \/ 180.0;\r\n          camera.rotation.y = lookAngleY * Math.PI \/ 180.0;\r\n          camera.rotation.z = lookAngleZ * Math.PI \/ 180.0;\r\n          cInc = 0.0;\r\n        }\r\n      }\r\n<\/pre>\n
Here’s a direct link<\/a> to test on your mobile device.  Let me know if it works for you.  Here<\/a>‘s a different way to see if your device even supports this functionality.<\/p>\n
This setup looks like it works on my iPhone for small rotations but it really doesn’t behave the way I’d want it to.  There’s clearly a lot more going on<\/a>.  I’m going to dig into that a bit later but in the meantime I found an even more direct — and easier — way to accomplish this.  Addendum, February 22, 2017:  No, that’s not what was going on, this<\/a> is what was going on.  The rotations I did accounted for the directional vector but not the rotation around that vector.  This is the extra factor addressed in DeviceOrientationControls.js.<\/p>\n
Three.js already includes a way to incorporate a device’s orientation, and that is by including the capabilities in DeviceOrientationControls.js.  An example is here<\/a>.  I pulled all of the previous code out and replaced it with all of three new lines identified below, and also set the orbit increment to zero.<\/p>\n
\r\n