CODEWITHSUNDEEP
javascriptjquerycssiframeaframe
Sekoul
Sekoul

Reputation: 1371

How can I use aframe to create a 360 video effect?

CONTEXT

We want to create an effect similar to what has been implemented here. I am however looking to make the 360 video act as the hero element of a longer page.

PROBLEM

The best solution I've found so far for the 360 video is to use Mozilla's aframe, as is done here. However, the problem I come against is that adding an <a-scene></a-scene> to my longer page essentially breaks the rest of the page, making me unable to see elements underneath (thought they are in DOM). One solution I found was to put the a-scene on a separate page and then display it in an iframe on my page. this works fine when I scroll next to the iframe, but scrolling does not work within the iframe.

Typical solutions for this scroll problem say to you use overflow: hidden, but this did not work so I thought maybe there is a different approach I can take, which makes mouse movements over the 360 video control the camera, whereas scroll controls the parent page.

Upvotes: 2

Views: 539

Answers (1)

ngokevin
ngokevin

Reputation: 13233

https://aframe.io/docs/0.4.0/components/embedded.html

Use the embedded component then style the scene element.

<a-scene embedded>

Upvotes: 1

Related Questions