# 📳 Device Motion === Accelerometer !== walking physical mobile device around a room

**URL:** <https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382>\
**Category:** Discussion\
**Tags:** mobile, optical, device, phone, orientation, zoom\
**Created:** [July 9, 2018, 4:59pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382 "2018-07-09T16:59:46Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [July 9, 2018, 4:59pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/1 "2018-07-09T16:59:46Z")

</div>

The example provided only works on a mobile device, in my case an iphone

This IS NOT about using gestures to pinch zoom or buttons to press to zoom or viewport zoom, this **question** is related to **device orientation** to **mimic optical zoom in Three.js** by **moving the physical mobile device forward and backward in a users available space**?

Over the weekend I found this very interesting example from [threejs.org](http://threejs.org):  
**Equirectangular panorama demo with DeviceOrientation controls:**  
[https://threejs.org/examples/misc\_controls\_deviceorientation.html](https://threejs.org/examples/misc_controls_deviceorientation.html)

yeah, no one is going to type that on there mobile phone, so here you go for the URL alternative: [http://bit.ly/2NDZ0zx](http://bit.ly/2NDZ0zx)

Still not easy enough, I created a **QR-Code** with: [https://www.qr-code-generator.com/](https://www.qr-code-generator.com/)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/252cb44cfe3b879917f7ddf5d4446779c2542e5d.png)

My first thought this could be done with the gyroscope/accelerometer using the z-axis?

If not possible no problem that is why I am asking before I dig myself out of my own rabbit hole!

Thanks for the help!

* * *

Researching in all the places across the web(cough cough stackoverflow) apparently i’ve come up with a new concept for the example: Equirectangular panorama

How I came up with optical zoom is figuring out what my iPhone lens is doing with the iPhone application provided. This is also not digital zoom since that requires cropping the edges with a photo editor.

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [July 9, 2018, 5:58pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/2 "2018-07-09T17:58:38Z")

</div>

You have `window.DeviceMotionEvent`. This _could_ give you acceleration data if your device has the hardware to support it: [https://developers.google.com/web/fundamentals/native-hardware/device-orientation/#device\_motion](https://developers.google.com/web/fundamentals/native-hardware/device-orientation/#device_motion)

Just listen for acceleration, and adjust your camera position accordingly.

Additionally, if you have iOS 11 or later, you could look into AR.js, which is built on top of Three.JS. Although augmented reality sounds a bit more complex than what you’re asking for, it’s worth a look: [https://jeromeetienne.github.io/AR.js/](https://jeromeetienne.github.io/AR.js/)

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [July 14, 2018, 2:49pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/3 "2018-07-14T14:49:48Z")

</div>

**Mobile accelerometer input**  
[https://www.inkfood.com/mobile-accelerometer-input/](https://www.inkfood.com/mobile-accelerometer-input/)

**Understanding DeviceOrientation events by creating a small 3D game with babylon.js**  
[https://www.eternalcoding.com/?p=213](https://www.eternalcoding.com/?p=213)

**Spec**  
[https://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion](https://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion)

**Gyroscope:**  
[https://w3c.github.io/gyroscope/](https://w3c.github.io/gyroscope/)  
https://codepen.io/herebefrogs/embed/preview/myYQmW?height=300&slug-hash=myYQmW&default-tabs=html,result&host=https://codepen.io  
[http://inkfood.github.io/Gyro\_demo/](http://inkfood.github.io/Gyro_demo/)

**Accelerometer:**  
[https://w3c.github.io/accelerometer/](https://w3c.github.io/accelerometer/)  
[http://inkfood.github.io/Gyro\_Ball2/](http://inkfood.github.io/Gyro_Ball2/)

**Sensor**  
[https://w3c.github.io/sensors/](https://w3c.github.io/sensors/)  
[https://www.w3.org/TR/motion-sensors/](https://www.w3.org/TR/motion-sensors/)

> **[Sensors For The Web!  |  Web
       |  Google Developers](https://developers.google.com/web/updates/2017/09/sensors-for-the-web)**
>
> Generic Sensor API is enabled by default in Chrome 67 or later.

  

> **[kenchris/sensor-polyfills](https://github.com/kenchris/sensor-polyfills)**
>
> Polyfill for Generic Sensor API. Contribute to kenchris/sensor-polyfills development by creating an account on GitHub.

---

<div class="post-metadata">

**Author:** ![alfeugds](https://avatars.discourse-cdn.com/v4/letter/a/f17d59/32.png) [@alfeugds](https://discourse.threejs.org/u/alfeugds)\
**Post date:** [June 23, 2019, 3:57am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/4 "2019-06-23T03:57:58Z")

</div>

hey! I’m very interested in the same subject. did you manage to accomplish it?

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [June 23, 2019, 6:04am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/5 "2019-06-23T06:04:49Z")

</div>

Not yet, on the back burner - some day to revisit!

---

<div class="post-metadata">

**Author:** ![rudrjain](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rudrjain/32/17462_2.png) [@rudrjain](https://discourse.threejs.org/u/rudrjain)\
**Post date:** [April 16, 2021, 8:56am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/6 "2021-04-16T08:56:16Z")

</div>

Hey @ben have you been successfull in accomplishing the task?

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [April 16, 2021, 5:15pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/7 "2021-04-16T17:15:50Z")

</div>

Not yet, but you have sparked my interest again - will be looking into this again in the next few days

---

<div class="post-metadata">

**Author:** ![rudrjain](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/rudrjain/32/17462_2.png) [@rudrjain](https://discourse.threejs.org/u/rudrjain)\
**Post date:** [April 17, 2021, 6:11am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/8 "2021-04-17T06:11:57Z")

</div>

Any progress you have made which could help me solve this issue as fast as possible from your learnings

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [April 19, 2021, 4:57pm UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/9 "2021-04-19T16:57:35Z")

</div>

So far i’m with @marquizzo on his thinking with use case of AR.js because this gives you a direct feed to the camera from the browser which is the quick solution.

Their might be something with [https://hammerjs.github.io/](https://hammerjs.github.io/) = touch gestures.

Ideally wouldn’t want to touch anything to do digital zoom. Programmatically doing this will take time. I like this idea @marquizzo with window.DeviceMotionEvent and then listening for acceleration + moving the FOV.

Not sure if this will be fool proof across all devices though. After attempting with W3C documentation over the weekend - iphone failed miserably ☹

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [April 23, 2021, 8:39am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/10 "2021-04-23T08:39:50Z")

</div>

> **[GitHub - petervojtek/touchless-map: Experimental smartphone app for touchless map...](https://github.com/petervojtek/touchless-map)**
>
> Experimental smartphone app for touchless map control (zoom&move via accelerometer)

### Zoom In

Move the smartphone towards yourself and back to zoom in one level.

[![](https://github.com/petervojtek/touchless-map/raw/master/videos/zoom-in.gif)](https://github.com/petervojtek/touchless-map/raw/master/videos/zoom-in.gif)

### Zoom Out

Move the smartphone away from you (towards ground) and back to starting position to zoom out.

[![](https://github.com/petervojtek/touchless-map/raw/master/videos/zoom-out.gif)](https://github.com/petervojtek/touchless-map/raw/master/videos/zoom-out.gif)

### Return to Your Current Location and Reset Zoom

Shake your smartphone to return to location provided by your phone and change zoom level to initial value.

[![](https://github.com/petervojtek/touchless-map/raw/master/videos/shake.gif)](https://github.com/petervojtek/touchless-map/raw/master/videos/shake.gif)

> **[GitHub - petervojtek/touchless-map: Experimental smartphone app for touchless map...](https://github.com/petervojtek/touchless-map)**
>
> Experimental smartphone app for touchless map control (zoom&move via accelerometer)

> 📄 **Note to reader:** Not affiliated with this project, this is only for educational purposes. Sharing what has been discovered over time.

---

<div class="post-metadata">

**Author:** ![ben](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ben/32/1174_2.png) [@ben](https://discourse.threejs.org/u/ben)\
**Post date:** [April 23, 2021, 10:52am UTC](https://discourse.threejs.org/t/device-motion-accelerometer-walking-physical-mobile-device-around-a-room/3382/11 "2021-04-23T10:52:13Z")

</div>

> [@Using accelerometer](https://discourse.threejs.org/t/using-accelerometer/25407):
>
> Hello Community I need to access accelerometer in mobile device and transfer the info to the camera for its position, My end objective is to create a custom web-ar experience. Using device orientation camera i have achieved this [https://presence-demo.s3.amazonaws.com/Web-AR/Hologram-AR/index.html](https://presence-demo.s3.amazonaws.com/Web-AR/Hologram-AR/index.html) Any go to tutorial or a working demo will be of great help