Using a-frame primitive to display 360 content

Question

I am trying to use A-Frame to either display a 360 video or a 360 photo, but stumbled across some limitations of the a-entity framework: videosphere or sky are not accepted as an attribute, so:

this doesn't work: <a-entity geometry="primitive:videosphere", ... ></a-entity>

and this doesn't either: <a-entity geometry="primitive:sky", ... ></a-entity>

I searched the documentation but could not find why box, plane or sphere etc. do work with a-entity, but sky or videosphere do not.

The purpose of this question is: I want to write a piece of code that is able to show 360 videos and 360 photographs and switch from one content type to another. Is there a simple solution?

Pierre

Answer 1

Neither videosphere, or sky, are geometry primitives. Here's the list of built-in geometries.

To switch the photographs / videos, just keep a sphere, or sky:

<a-sphere material="side:back"></a-sphere>

<a-sky></a-sky>

and switch the material.src attribute via an registered component. ou'll have to remember to manually call play() and stop() on the videos, for they might be playing in the background.