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"));