webgl-canvas

1.0.1 • Public • Published

React webgl canvas component

A React webgl canvas component that handles resizing and context loss.

Installation

Use npm to install:

npm install webgl-canvas

Usage

import React, { Component } from 'react';
import WebGLCanvas from 'webgl-canvas';
 
export default class Canvas extends Component {
 
    onSceneInitialized(gl) {
        // handle any initialization here. This function is called the first time
        // the component mounts. It will be called again if the webgl context is
        // lost and needs to be reinitialized (this is handled automatically by
        // the WebGLCanvas component)
    }
 
    onSceneRender(gl) {
        // render your scene! This function is called at 60fps by requestAmimationFrame
    }
 
    render() {
        return (
            <WebGLCanvas dimensions={{ width: 500, height: 300 }}
                         onSceneInitialized={gl => this.onSceneInitialized(gl)}
                         onSceneRender={gl => this.onSceneRender(gl)} />
        );
    }
}

Copyright and License

Code and documentation copyright 2017 Jon Brennecke. Code released under the MIT license. Docs released under Creative Commons.

Readme

Keywords

none

Package Sidebar

Install

npm i webgl-canvas

Weekly Downloads

1

Version

1.0.1

License

MIT

Last publish

Collaborators

  • caldera-design