AFRAME Material Collection.

!Demo

Aframe Material Collection uses material design and the yoga layout engine to make prototyping UI configurations much easier inside aframe.
It goes further than providing some reusable components for your UI, but also integrates yoga for easy and powerful flex layouts. 2D primitives used inside the a-ui-scroll-pane are automatically measured for width and height to allow the layout engine to automatically place them with default settings, but all of these can be overridden with the ui-yoga component to allow granular control over the layout properties. Note only a subset of 2D primitives are supported for auto layout including a-plane, a-circle, a-ring, a-text ( width width and height explicitly set ) and all the primitives below.

Live Demo

DEMO

Inspiration

I wanted to port my scene editor built in Altspace VR to the browser as a standalone aframe based project. AltspaceVR
provided a renderTarget based solution allowing you to render a browser to a texture. This made prototyping UIs as easy as making web apps.
Without this solution available in the browser, I had to make my own UI components so I could re-create the editor UI in a WebGL context -
as such aframe-material-collection was born.


Here is a demo of the new aframe based Shane's Editor with a more complex UI:
!Demo

The Shane's Editor project is also open source and you can get involved at
github, join our
discord or take it for a test drive in the
live demo

Getting Started

#### CDN for browser
``HTML





`

#### Installing

`
npm i aframe-material-collection
`

#### Running

`
npm start
`

#### Building

`
npm run build
`

Documentation

Primitives

Components

Yoga Layout Engine

Examples

`HTML

























``

TODOs:

* Need to add touchpad/joystick support for scrolling.
* Need to document yoga layout properties/strategies.
* Look at unit testing with Karma