node package manager

aframe-layout-component

aframe-layout-component

Layout component for A-Frame.

Layout

Automatically positions child entities in 3D space, with several layouts to choose from. Define the layout on the parent entity:

<a-entity layout="type: line; margin: 2">
  <a-box></a-box>
  <a-box></a-box>
  <a-box></a-box>
</a-entity>

And then the positions will automatically be calculated and set:

<a-entity layout="type: line; margin: 2">
  <a-box position="0 0 0"></a-box>
  <a-box position="2 0 0"></a-box>
  <a-box position="4 0 0"></a-box>
</a-entity>

As entities are added or removed, the layout component will trigger a reflow on the positions.

We move then entire group around while maintaining the layout:

<a-entity layout="type: line; margin: 2" position="0 5 -5">
  <a-box position="0 0 0"></a-box>
  <a-box position="2 0 0"></a-box>
  <a-box position="4 0 0"></a-box>
</a-entity>

Properties

Property Description Default Value
type Type of layout. Can be one of box, circle, cube, dodecahedron, line, pyramid. line
column Number of columns (for type box). 1
margin Margin in meters (for type box, line). 1
plane Which plane direction for 2D layout. Can be xy, yz, or xz (for type box, circle) xy
radius Radius in meters (for type circle, cube, dodecahedron, pyramid. 1
reverse Whether to reverse direction of layout. false

Usage

Browser Installation

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script> 
  <script src="https://unpkg.com/aframe-layout-component@4.1.1/dist/aframe-layout-component.min.js"></script> 
</head>
 
<body>
  <a-scene>
    <a-entity layout="type: circle; radius: 10">
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
      <a-entity geometry="primitive: box" material></a-entity>
    </a-entity>
  </a-scene>
</body>

NPM Installation

Install via NPM:

npm install aframe-layout-component

Then register and use.

require('aframe');
require('aframe-layout-component');