0.1.3 • Published 5 years ago
jw-three-canvas v0.1.3
jw-three-canvas
A react component for canvas, integrated with three.js renderer and animation feature by an integrated animator.
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"));