axis3d

Axis3D

Axis3D is a lightweight functional graphics library built on top of regl.

STATUS

Stable - This project is in active development

Installation

See the Installation Documentation for more information on how to install Axis3D into your project.

Example

The following hello world example demonstrates rendering a green box to the screen. A canvas is created with a webgl context and automatically appended to the body DOM element.

'use strict'
import {
  PerspectiveCamera,
  FlatMaterial,
  BoxGeometry,
  Context,
  Color,
  Frame,
  Mesh,
} from 'axis3d'

import quat from 'gl-quat'

const ctx = Context()

const material = FlatMaterial(ctx)
const camera = PerspectiveCamera(ctx, {position: [0, 0, 2]})
const frame = Frame(ctx)
const box = Mesh(ctx, { geometry: BoxGeometry(ctx) })

const rotation = [0, 0, 0, 1]
const angle = [0, 0, 0, 1]

frame(({time}) => {
  quat.setAxisAngle(angle, [0, 1, 0], 0.5*time)
  quat.slerp(rotation, rotation, angle, 0.01)
  camera({rotation}, () => {
    material({color: Color('cyan')}, () => {
      box({wireframe: true})
    })
  })
})

See Also

• Axis3D Hello World

• Getting Started With Axis3D

• regl - Functional WebGL
• glslify - A node.js-style module system for GLSL
• stackgl - Modular WebGL components

License

MIT