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

zoom
mobile
optical
device
phone
orientation
#1

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:
Equirectangular panorama demo with DeviceOrientation controls:
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

Still not easy enough, I created a QR-Code with: https://www.qr-code-generator.com/
image

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.

#2

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

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/

2 Likes
#3

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

Spec
https://w3c.github.io/deviceorientation/spec-source-orientation.html#devicemotion

Gyroscope:
https://w3c.github.io/gyroscope/

http://inkfood.github.io/Gyro_demo/

Accelerometer:
https://w3c.github.io/accelerometer/
http://inkfood.github.io/Gyro_Ball2/

Sensor
https://w3c.github.io/sensors/
https://www.w3.org/TR/motion-sensors/