README
aframe-layout-component
Layout component for A-Frame.
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');