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