kframe

Kevin's collection of A-Frame components and scenes.

VIEW DEMOS

Components

animation - Animations in A-Frame using anime.js
audioanalyser - Audio visualizations in A-Frame using Web Audio (AnalyserNode)
broadcast - Multi-user in A-Frame using raw websockets
entity-generator - Generate a number of entities in A-Frame given a mixin
event-set - Set properties in response to events in A-Frame
firebase - Multi-user in A-Frame using Firebase
layout - Position and layout child entities in 3D space for A-Frame
look-at - Rotate an entity to face towards another entity in A-Frame
mountain - Mountain terrain in A-Frame using randomly-generated height maps
randomizer - Randomize color, position, rotation, and scale in A-Frame
redux - Hook in Redux reducers, data bindings, and action dispatches for A-Frame
reverse-look-controls - Fork of A-Frame v0.3.0 look controls component with reversed mouse drag.
sun-sky - Gradient sky with adjustable sun in A-Frame
template - Encapsulate groups of entities, use templating engines, and do string interpolations in A-Frame
text - Geometry-based text in A-Frame

Installation

K-Frame bundles some components together to kframe.js for convenience:

animation
audio-visualizer
entity-generator
event-set
layout
look-at
mountain
randomizer
sun-sky
template
text

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.3.0/aframe.min.js"></script>
  <script src="https://rawgit.com/ngokevin/kframe/master/dist/kframe.min.js"></script>
</head>

<body>
  <a-scene>
    <!-- Refer to individual component documentation for specific usage. -->
  </a-scene>
</body>

npm

Or install from npm. Requiring K-Frame will automatically register the components and systems.

require('kframe');

Installing Individual Components

For documentation on installing individual components, see the documentation pages for each component.

Local Installation

git clone git@github.com:ngokevin/kframe
npm install  # Run npm install on all inner modules
npm run dev  # Webpack dev server that watches all component files

About

:package: Kevin's collection of A-Frame components and scenes.

https://ngokevin.github.io/kframe/

MIT License

Languages

Language:HTML 59.4%Language:JavaScript 39.1%Language:GLSL 1.4%