npm install --save akkad

requires npm >= 5.0

Getting Started

Component Guide

Systems tutorial

State tutorial

Akkad is a React Webgl target that uses the Babylon.js library. Its aim is to allow any developer familiar with React the ability to create 3D scenes and games.

• Full power of React meets WebGL and Babylon
• Embed multiple interactive "scenes" directly in your React based site.
• Uses a redux-like state cycle
• Defined method of extention via Entities and Systems.

• Imported Meshes
• Materials with Textures
• Muliple forms of camera and light sources
• Basic Animations
• Gravity
• Collisions
• Particles
• Basic triggers like onClick
• Add things like overlays with React generated DOM
• Lot's more to come!

A basic example of Akkad can be created in one file:

import React, {Component} from 'react';
import {Akkad, Scene, cameras, lights, shapes} from "akkad";

const {ArcRotateCamera} = cameras;
const {HemisphericLight} = lights;
const {Box} = shapes;

class App extends Component {
    render() {
        return (
            <Akkad>
                <Scene>
                    <ArcRotateCamera
                        initialPosition={[3, 4, -5]}
                        target={[0, 1, 0]}
                    />
                    <HemisphericLight />
                    <Box />
                </Scene>
            </Akkad>
        );
    }
}

export default App;

Please check out the example project included for more.

Akkad includes an example project for quick testing and development work. To use the example project:

From the project root:

$ cd akkad
$ npm run setup:watch
$ cd ../example
$ npm run setup:dev // only needed the first time.
$ npm run start:dev

This will allow you to make changes to Akkad live while you are running the example app.