Aframe 布局组件：如何制作一个球形图片库？

Question

我正在使用 Aframe Layout Component 并且我希望以围绕中心旋转的方式定位图像。像那样：

但我不知道如何使用布局属性。这是我的代码：

<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>

结果：

我可以创建一个 Cercle，但我想要一个 Sphere。我不知道如何制作球体。
你能帮帮我吗？

谢谢

Answer 1

如果您想从文档中获取类似这张图片的内容：

你可以看看example the screenshot is taken from

使用 dodecahedron 类型：

layout="type: dodecahedron; radius: 10"

使用look-at组件，所以图像都朝向相机：
```
look-at="[camera]
```

是这样的：

<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>

如果你想要水平圆圈（或几个圆圈层），你可以使用 circle 类型并旋转它：

<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>

Aframe 布局组件：如何制作一个球形图片库？

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

aframe