Loading Gif

jQuery gyroscope mobile viewer using three.js

09Feb2015

jQuery gyroscope mobile viewer using three.js

This is a 3D viewer I was experimenting with. It was made with Homebuilders / Realestate agents in mind. It uses the phones screen like a window to another room/environment. It is the first time I experimented with the new “deviceorientation” and “devicemotion” api’s availavble to javascript. Obviously it works best on a phone but I created a draggable fallback for devices without access to these api’s.

Some interesting difficulties that arose during coding were that the values passed to the window.deviceorientation event vary vastly between devices. I was able to use a library called FullTilt by Rich Tibbet to normailse these values.

Here is some further reading on the functions -> http://www.html5rocks.com/en/tutorials/device/orientation/

And heres how to add a device orientation listener.

jQuery gyroviewer using three.js

Download files Open in a new window