aframe-layout-component

Position and layout child entities in 3D space for A-Frame

Usage no npm install needed!

<script type="module">
  import aframeLayoutComponent from 'https://cdn.skypack.dev/aframe-layout-component';
</script>

README

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
marginColumn Margin in meters just for the columns (for type box). Defaults to margin value. 1
marginRow Margin in meters just for the rows (for type box). Defaults to margin value. 1
orderAttribute Attribute name used to explicitly order the children versus relying on inherent DOM order. ''
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
align Alignment of the center of layout (for type box, line). Can be one of start, center, end. start

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.8.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-layout-component@4.3.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');