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

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 Likes

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/

3 Likes

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/


1 Like

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

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

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

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

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

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/ = 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 :frowning_face:

1 Like

Zoom In

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

Zoom Out

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

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.

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