92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
/*
|
|
* ThreeJS Section
|
|
* Section for Three JS.
|
|
*
|
|
* Version:
|
|
* 1.0.0 - 2018/03/10
|
|
*/
|
|
|
|
import React from 'react';
|
|
import Section from './../Section';
|
|
import * as THREE from 'three';
|
|
|
|
class ThreeSection extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
}
|
|
|
|
componentDidMount() {
|
|
if(typeof this.scene !== typeof undefined) return;
|
|
this.scene = new THREE.Scene();
|
|
this.camera = new THREE.PerspectiveCamera(17, window.innerWidth / window.innerHeight, 0.1, 1000 );
|
|
this.isAlive = true;
|
|
|
|
this.render = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
|
|
this.render.setSize(window.innerWidth, window.innerHeight);
|
|
|
|
this.camera.position.z = 5;
|
|
|
|
this.ambient1 = new THREE.AmbientLight(0xFFCCFF, 0.2);
|
|
this.scene.add(this.ambient1);
|
|
this.ambient2 = new THREE.AmbientLight(0xFFFFFF, 0.5);
|
|
this.scene.add(this.ambient2);
|
|
|
|
this.light = new THREE.DirectionalLight(0x22BBFF, 0.5);
|
|
this.light.position.x = this.camera.position.x;
|
|
this.light.position.y = this.camera.position.y;
|
|
this.light.position.z = this.camera.position.z + 8;
|
|
this.scene.add(this.light);
|
|
|
|
if(typeof this.props.onSetup !== typeof undefined) {
|
|
this.props.onSetup(this.scene, this.camera, this.renderer);
|
|
}
|
|
|
|
this.onFrame();
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
this.isAlive = false;
|
|
}
|
|
|
|
onFrame() {
|
|
if(!this.isAlive) return;
|
|
|
|
let now = new Date();
|
|
let width = this.refs.canvasSpace.clientWidth;
|
|
let height = this.refs.canvasSpace.clientHeight;
|
|
let diff = now.getTime() - (this.lastTime || new Date()).getTime();
|
|
diff = diff / 1000;
|
|
|
|
let hfov = 95;
|
|
let hfovRad = hfov * Math.PI / 180;
|
|
let vfovRad = 2*Math.atan(Math.tan(hfovRad/2)*height/width);
|
|
|
|
this.render.setSize(width, height);
|
|
this.render.setPixelRatio(window.devicePixelRatio);
|
|
|
|
this.camera.aspect = width / height;
|
|
this.camera.fov = vfovRad * 180 / Math.PI;
|
|
this.camera.updateProjectionMatrix();
|
|
requestAnimationFrame(this.onFrame.bind(this));
|
|
|
|
if(typeof this.props.onRender !== typeof undefined) {
|
|
this.props.onRender(diff);
|
|
}
|
|
|
|
this.render.render(this.scene, this.camera);
|
|
this.lastTime = now;
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<Section section="three" full>
|
|
<div className="c-section--style-three__canvas" ref="canvasSpace"></div>
|
|
<canvas ref="canvas" className="c-section--style-three__canvas">
|
|
</canvas>
|
|
</Section>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default ThreeSection;
|