Aframe Layout Component: How to make a sphere images gallery? - aframe

Question

I am using Aframe Layout Component and I will want to position images in such a way that they orbit around the center. Like that:
But I don't know to do that with the layout property. This is my code:
<a-entity id="links" layout="type: circle; radius: 2.5; angle: 90; margin: 2.5" position="0 -1 -4" rotation="10 40 0">
<!-- // My images entity
</a-entity>
Result:
I can create make a Cercle but I would like a Sphere.
I don't know how to make Sphere.
Can you help me?
Thank you

Answer 1

If you want to get something like this image from the docs:
You can just look at the example the screenshot is taken from
use the dodecahedron type:
layout="type: dodecahedron; radius: 10"
use the look-at component, so the images are all oriented towards the camera:
look-at="[camera]
Something like this:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component#4.3.1/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component#0.8.0/dist/aframe-look-at-component.min.js"></script>
<a-scene>
<a-assets>
<img id="img" crossorigin="anonymous" src="https://i.imgur.com/wjobVTN.jpeg" />
<a-mixin id="image" geometry="primitive: plane;width: 2; height: 2;"
material="shader: flat; src: #img; side: double"
look-at="[camera]"></a-mixin>
</a-assets>
<a-entity position="0 0.5 -3" layout="type: dodecahedron; radius: 10">
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
</a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
If you want a horizontal circle (or couple of circle layers), you can use a circle type and rotate it:
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://unpkg.com/aframe-layout-component#4.3.1/dist/aframe-layout-component.min.js"></script>
<script src="https://unpkg.com/aframe-look-at-component#0.8.0/dist/aframe-look-at-component.min.js"></script>
<a-scene>
<a-assets>
<img id="img" crossorigin="anonymous" src="https://i.imgur.com/wjobVTN.jpeg" />
<a-mixin id="image" geometry="primitive: plane;width: 2; height: 2;" material="shader: flat; src: #img; side: double" look-at="[camera]"></a-mixin>
</a-assets>
<a-entity position="0 1 0" layout="type: circle; radius: 5" rotation="90 0 0">
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
<a-entity mixin="image"></a-entity>
</a-entity>
<a-sky color="#ECECEC"></a-sky>
</a-scene>