node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »

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
columns 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, line) xy
radius Radius in meters (for type circle, cube, dodecahedron, pyramid. 1
reverse Whether to reverse direction of layout. false
angle For type circle, set this to position items angle degrees apart 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.2/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');