aframe-layout

3D layout component and helpers for A-Frame VR.

Usage no npm install needed!

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

README

aframe-layout-component

3D layout component and helpers for A-Frame VR.

Usage

Install (or directly include the browser files).

npm install --save aframe-layout

Register.

var layout = require('aframe-layout').component;
require('aframe-core').registerComponent('layout', layout);

Use.

<a-entity layout="type: circle; margin: 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>

This will layout all of the child entities in a circle.

Attributes

Attribute Description Default Value
type Type of layout. Can be one of box, circle, cube, dodecahedron, line, pyramid. line
margin Margin in meters. 1
radius Radius in meters. 1