canvas3d

A canvas react UI component integrated with 3d rendering features. It is an extension of canvas, integrated with three.js library.

install

Usage

import React, { Component } from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";

import Canvas3D from "@jworkshop/canvas3d";

import "./style.css";

class Example extends Component {
  constructor(props) {
    super(props);

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

  someFunction() {
    const canvas = this.myCanvas;

    /** Retrieve the canvas react component. */
    canvas.getCanvasElement();

    /** Get the width of the canvas react component. */
    canvas.getCanvasWidth();

    /** Get the width of the canvas react component. */
    canvas.getCanvasHeight();

    /** Get the context of the canvas. */
    canvas.getContext();

    /** Pause the animation. */
    canvas.start();

    /** Pause the animation. */
    canvas.pause();

    /** Pause the animation. */
    canvas.resume();

    /** Retrieve the 3D scene. */
    canvas.getScene();

    /** Retrieve the main camera. */
    canvas.getCamera();


    /** Example */
    const scene = canvas.getScene();

    const RADIUS = 50;
    const SEGMENTS = 16;
    const RINGS = 16;

    const sphereMaterial = new THREE.MeshLambertMaterial({
      color: 0xcc0000
    });

    const sphere = new THREE.Mesh(
      new THREE.SphereGeometry(RADIUS, SEGMENTS, RINGS),
      sphereMaterial
    );

    // Move the Sphere back in Z so we can see it.
    sphere.position.z = -300;

    // Finally, add the sphere to the scene.
    scene.add(sphere);

    const pointLight = new THREE.PointLight(0xffffff);

    // set its position
    pointLight.position.x = 0;
    pointLight.position.y = -150;
    pointLight.position.z = 130;

    // add to the scene
    scene.add(pointLight);

    myCanvas.start();
  }

  resizeHandler(width, height) {
    // Do you stuff
  }

  render() {
    const { scene, camera } = this. props;

    return (
      <Canvas3D
        scene={scene}
        camera={camera}
        ref={myCanvas => this.myCanvas = myCanvas}
        className="className"
        style={ ... }
        canvasClassName="canvasClassName"
        canvasStyle={ ... }
        onResize={this.resizeHandler}
      />
    );
  }
}

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