https://github.com/waichungwong/jw-three-canvas

A react component for canvas, integrated with three.js renderer and animation feature.
https://github.com/waichungwong/jw-three-canvas

canvas npm-module react three-js

Last synced: 1 day ago
JSON representation

A react component for canvas, integrated with three.js renderer and animation feature.

• Host: GitHub
• URL: https://github.com/waichungwong/jw-three-canvas
• Owner: WaiChungWong
• License: mit
• Created: 2018-07-12T06:55:37.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-15T08:11:37.000Z (almost 6 years ago)
• Last Synced: 2024-11-15T21:09:28.096Z (1 day ago)
• Topics: canvas, npm-module, react, three-js
• Language: JavaScript
• Size: 2.02 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# jw-three-canvas

A react component for canvas, integrated with [three.js](https://threejs.org) renderer and animation feature by an integrated [animator](https://nodei.co/npm/jw-animator).

[![NPM version][npm-image]][npm-url]

[![build status][travis-image]][travis-url]

[![node version][node-image]][node-url]

[![npm download][download-image]][download-url]

[npm-image]: http://img.shields.io/npm/v/jw-three-canvas.svg

[npm-url]: http://npmjs.org/package/jw-three-canvas

[travis-image]: https://img.shields.io/travis/WaiChungWong/jw-three-canvas.svg

[travis-url]: https://travis-ci.org/WaiChungWong/jw-three-canvas

[node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg

[node-url]: http://nodejs.org/download/

[download-image]: https://img.shields.io/npm/dm/jw-three-canvas.svg

[download-url]: https://npmjs.org/package/jw-three-canvas

[Demo](http://waichungwong.github.io/jw-three-canvas/build)

## Install

[![NPM](https://nodei.co/npm/jw-three-canvas.png)](https://nodei.co/npm/jw-three-canvas)

## Methods

| Method             | Parameters | Description                          |

| ------------------ | ---------- | ------------------------------------ |

| `getCanvasElement` |            | retrieve the canvas react component. |

## Props

| Prop                            | Description                                                                                                                                                             |

| ------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

| `maintainAspectRatio`(optional) | whether the canvas should keep aspect ratio from the moment it was created. Default: `true`                                                                             |

| `onResize`(optional)            | event handler when the canvas is being resized.                                                                                                                         |

| `animator`(optional)            | the animator object for controlling the animation. If not provided, it will be created from within.                                                                     |

| `animate`(optional)             | animation method. Parameters:
 - `width`: context width
 - `height`: context height
 - `timeDiff`: time difference between the last animate time (in seconds). |

| `scene`                         | A [scene](https://threejs.org/docs/index.html#api/scenes/Scene) from [three.js](https://threejs.org)                                                                    |

| `camera`                        | A [camera](https://threejs.org/docs/index.html#api/cameras/Camera) from [three.js](https://threejs.org)                                                                 |

## Usage

```javascript

import React, { Component } from "react";

import { render } from "react-dom";

import {

  Scene,

  PerspectiveCamera,

  PointLight,

  BoxGeometry,

  MeshLambertMaterial,

  Mesh

} from "three";

import ThreeCanvas from "jw-three-canvas";

class Example extends Component {

  constructor(props) {

    super(props);

    this.resizeHandler = this.resizeHandler.bind(this);

    this.animate = this.animate.bind(this);

    this.scene = new Scene();

    this.camera = new PerspectiveCamera(50, 1, 1, 1000);

    this.camera.position.z = 60;

    this.scene.add(this.camera);

    /** And other things you can add in the scene... */

  }

  componentDidMount() {

    const canvas = this.myCanvas;

    const { animator } = canvas;

    /** Start the animation. */

    animator.start();

    /** Pause the animation. */

    animator.pause();

    /** Resume the animation. */

    animator.resume();

  }

  resizeHandler(width, height) {

    /** ... **/

  }

  animate(width, height, timeDiff) {

    /** ... **/

  }

  render() {

    const { scene, camera } = this;

    return (

       (this.myCanvas = myCanvas)}

        onResize={this.resizeHandler}

        animate={this.animate}

        scene={scene}

        camera={camera}

      />

    );

  }

}

ReactDOM.render(, document.getElementById("root"));

```