Skip to content

Instantly share code, notes, and snippets.

@mariusk
Last active November 20, 2015 17:39
Show Gist options
  • Save mariusk/b2a1295b95a353e8d5e7 to your computer and use it in GitHub Desktop.
Save mariusk/b2a1295b95a353e8d5e7 to your computer and use it in GitHub Desktop.
import _ from 'lodash';
import React from 'react';
import React3 from 'react-three-renderer';
import THREE from 'three';
class ThreeDView extends React.Component {
constructor(props, context) {
super(props, context);
this.cameraPosition = new THREE.Vector3(0, 0, 5);
this.show = true;
this.state = {
cubeRotation: new THREE.Euler()
};
this._onAnimate = () => {
this.setState({
cubeRotation: new THREE.Euler(
this.state.cubeRotation.x + 0.1,
this.state.cubeRotation.y + 0.1,
0
)
});
};
}
render() {
//console.log('ThreeDView::render');
const width = window.innerWidth;
const height = window.innerHeight;
if (this.show) {
console.log('RENDER', this.cameraPosition instanceof THREE.Vector3,
this.state.cubeRotation instanceof THREE.Euler);
this.show = !this.show;
}
return (
<React3
mainCamera="camera"
width={width}
height={height}
onAnimate={this._onAnimate}>
<scene>
<perspectiveCamera
name="camera"
fov={75}
aspect={width / height}
near={0.1}
far={1000}
position={this.cameraPosition}
/>
<mesh
rotation={this.state.cubeRotation}
>
<boxGeometry
width={1}
height={1}
depth={1}
/>
<meshBasicMaterial
color={0x00ff00}
/>
</mesh>
</scene>
</React3>);
}
};
export default ThreeDView;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment