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

user_5311280 0
Viewed 196

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:

enter image description here

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:

enter image description here

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

aframe
1 Answers

If you want to get something like this image from the docs:

enter image description here

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>

user_24257870
Related