Skip to content

A webgl react target that utilizes the Babylon.js library. Create 3D scenes and Games with React!

License

Notifications You must be signed in to change notification settings

brochington/Akkad

Repository files navigation

Akkad

Join the chat at https://gitter.im/brochington/Akkad

npm install --save akkad


Akkad is no longer being supported.

If you would like to use React like syntax for libraries such as (but not limited to) Babylon, please check out my other project Declarity.


Docs:

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.

Features

  • 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.

Supports

  • Imported Meshes
  • Materials with Textures
  • Muliple forms of camera and light sources
  • Basic Animations
  • Gravity
  • Collisions
  • Particles
  • Basic triggers like onClick
  • Overlays with React generated DOM
  • Draw textures on elements with the Canvas API.
  • Lot's more to come!

Example

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
                        position={[3, 4, -5]}
                        target={[0, 1, 0]}
                    />
                    <HemisphericLight />
                    <Box />
                </Scene>
            </Akkad>
        );
    }
}

export default App;

Please check out the example project included for more.

Development

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

link the akkad library in the example app. From the project root:

$ cd akkad
$ npm link
$ cd ../example
$ npm link akkad
$ npm start:dev

In another terminal tab, navigate back to project root. Start up Akkad watch compilation:

$ cd akkad
$ npm run watch

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

About

A webgl react target that utilizes the Babylon.js library. Create 3D scenes and Games with React!

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published