Forum Discussion
How to implementing 180-Degree Slider Control
I want to connect a slider to the 360-degree image, enabling the user to control the horizontal movement, similar to how the 'A' and 'D' keys work. I'm unsure which method would result in smoother interaction, so I'd appreciate your recommendation on the best approach. Please refer to the attached image. Additionally, instead of rotating the image a full 360 degrees, I only want to rotate it 180 degrees using the slider.
The process I’m describing differs from typical object rotation in product viewers (e.g., rotating a device with a dial). My image is equirectangular, commonly used for 360-degree panoramic views, and I only want to control 180 degrees of its movement through the slider.
Based on the instructions provided, the image can be rotated and moved using the keyboard keys (W, A, S, D), but I’d like to replicate this interaction using a slider instead of keyboard input.
I also came across a discussion here where someone mentioned difficulties with students using Chromebooks being unable to rotate 360-degree pictures on their touchscreens. They were seeking an alternative method, such as using a slider, to rotate the image. I’m facing a similar challenge, and I’d appreciate any guidance on how to best implement this functionality.
- Nathan_HilliardCommunity Member
I'm not sure you can accurately control the 360 image movement from a JavaScript trigger. I didn't have much luck getting any events to register with the image viewer. Depending upon what exactly you plan to do, you might be better served just creating your own viewer. Doing that, it becomes very easy to control the image however you wish. There are also some examples available for adding extra functionality to the 360 image.
Rough demo: https://360.articulate.com/review/content/7b23c094-b726-4d86-865c-16340d867d4c/review
See https://threejs.org/examples/#webgl_panorama_equirectangular