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?
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.
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/
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.
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
Note to reader: Not affiliated with this project, this is only for educational purposes. Sharing what has been discovered over time.