jw-three-canvas

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

Demo

Install

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 from three.js | | camera | A camera from three.js |

Usage

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 (
      <ThreeCanvas
        ref={myCanvas => (this.myCanvas = myCanvas)}
        onResize={this.resizeHandler}
        animate={this.animate}
        scene={scene}
        camera={camera}
      />
    );
  }
}

ReactDOM.render(<Example />, document.getElementById("root"));