SCENARIO
Inspired by the immersive effect showcased here, we aim to utilize a 360 video as the central feature of an extended webpage layout.
ISSUE
Exploring options, I experimented with Mozilla's aframe, demonstrated here. Yet, integrating an <a-scene></a-scene>
disrupts the flow of the larger page, obscuring elements below (although present in the DOM). One workaround considered was placing the a-scene on a separate page and embedding it within an iframe. While this resolves scrolling near the iframe, internal scrolling within the embedded scene remains nonfunctional.
Common suggestions propose using overflow: hidden
to address scrolling issues, but this had little impact. Exploring alternative approaches, I seek a method where mouse movements control the camera within the 360 video, while scroll actions navigate the parent page seamlessly.