Doodle3D-Core/src/components/DoodlePreview.js

89 lines
2.3 KiB
JavaScript
Raw Normal View History

2017-10-24 12:33:14 +02:00
import * as THREE from 'three';
import 'three/examples/js/controls/EditorControls';
import React from 'react';
import PropTypes from 'proptypes';
import JSONToSketchData from '../shape/JSONToSketchData.js';
import createSceneData from '../d3/createSceneData.js';
import createScene from '../d3/createScene.js';
2017-11-14 02:30:53 +01:00
import injectSheet from 'react-jss';
import ReactResizeDetector from 'react-resize-detector';
2017-11-14 14:58:26 +01:00
import requestAnimationFrame from 'raf';
2017-11-23 17:29:56 +01:00
import { load as loadMatcapMaterial } from '../d3/MatcapMaterial.js';
2017-11-14 02:30:53 +01:00
const styles = {
2017-11-14 02:45:38 +01:00
container: {
height: '100%'
},
2017-11-14 02:41:39 +01:00
canvas: {
position: 'absolute'
}
2017-11-14 02:30:53 +01:00
};
2017-10-24 12:33:14 +02:00
class DoodlePreview extends React.Component {
2017-11-14 13:49:31 +01:00
static defaultProps = {
width: 720,
height: 480,
pixelRatio: 1
};
static propTypes = {
classes: PropTypes.objectOf(PropTypes.string),
width: PropTypes.number.isRequired,
height: PropTypes.number.isRequired,
pixelRatio: PropTypes.number.isRequired,
sketchData: PropTypes.object, // TODO
docData: PropTypes.shape({
appVersion: PropTypes.string,
data: PropTypes.string
})
};
state = {
scene: null
};
2017-10-24 12:33:14 +02:00
2017-11-02 22:53:47 +01:00
async componentDidMount() {
let { docData, sketchData } = this.props;
2017-10-24 12:33:14 +02:00
2017-11-02 22:53:47 +01:00
if (docData) sketchData = await JSONToSketchData(this.props.docData);
2017-10-24 12:33:14 +02:00
2017-11-02 22:53:47 +01:00
const { canvas } = this.refs;
2017-11-14 02:30:53 +01:00
const { pixelRatio } = this.props
2017-10-24 12:33:14 +02:00
2017-11-02 22:53:47 +01:00
const sceneData = createSceneData(sketchData);
const scene = createScene(sceneData, canvas);
2017-11-14 02:30:53 +01:00
this.setState(scene);
2017-10-24 12:33:14 +02:00
2017-11-02 22:53:47 +01:00
this.editorControls = new THREE.EditorControls(scene.camera, canvas);
2017-11-23 17:29:56 +01:00
this.editorControls.addEventListener('change', scene.render);
2017-11-23 17:33:53 +01:00
loadMatcapMaterial.then(scene.render);
2017-10-24 12:33:14 +02:00
}
2017-11-06 14:40:19 +01:00
componentWillUnmount() {
if (this.editorControls) this.editorControls.dispose();
}
2017-11-15 15:13:49 +01:00
resizeHandler = (width, height) => {
2017-11-14 14:58:26 +01:00
requestAnimationFrame(() => {
2017-11-14 02:50:26 +01:00
const { setSize, render } = this.state;
2017-11-14 02:30:53 +01:00
const { pixelRatio } = this.props;
setSize(width, height, pixelRatio);
});
};
2017-10-24 12:33:14 +02:00
render() {
2017-11-14 02:30:53 +01:00
const { classes } = this.props;
2017-10-24 12:46:16 +02:00
return (
2017-11-14 02:45:38 +01:00
<div className={classes.container}>
2017-11-15 15:13:49 +01:00
<ReactResizeDetector handleWidth handleHeight onResize={this.resizeHandler} />
2017-11-14 02:30:53 +01:00
<canvas className={classes.canvas} ref="canvas" />
</div>
2017-10-24 12:46:16 +02:00
);
2017-10-24 12:33:14 +02:00
}
}
2017-11-14 02:30:53 +01:00
export default injectSheet(styles)(DoodlePreview);