import React, { Component } from 'react';
import { autobind } from 'core-decorators';
import WebGLCanvas from 'webgl-canvas';
import WebGLText from 'webgl-text';
import provideDimensions from 'provide-dimensions';
type Dimensions = {
width: number;
height: number;
};
type AppProps = {
children?: undefined;
dimensions: Dimensions;
};
type AppState = {};
@provideDimensions
@autobind
export default class Page extends Component<AppProps, AppState> {
public props: AppProps;
private text: WebGLText;
private onSceneInitialized(gl: WebGLRenderingContext) {
this.text = new WebGLText(gl);
this.text.setText({
text: 'Hello World!',
fontFamily: 'sans-serif',
fontSize: 100
});
}
private onSceneRender(gl: WebGLRenderingContext) {
this.text.render({
rotation: 0,
position: { x: 50, y: 50 },
center: { x: 100, y: 100 },
resolution: this.props.dimensions,
size: { width: 300, height: 100 }
});
}
public render() {
const { width, height } = this.props.dimensions;
return (
<WebGLCanvas dimensions={{ width, height }}
onSceneInitialized={this.onSceneInitialized}
onSceneRender={this.onSceneRender} />
);
}
}