Refactoring a lot of code

public/3d/scenes/AboutScene.jsx

@@ -0,0 +1,61 @@
+/*
+ *  About Scene.
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *
+ *  Version:
+ *    1.0.0 - 2018/04/08
+ */
+import SceneComponent from './SceneComponent';
+import * as THREE from 'three';
+import PVM from './../models/pvm.json';
+import * as Easing from './../../animation/Easing.js';
+
+class AboutScene extends SceneComponent {
+  constructor(props) {
+    super(props);
+  }
+
+  onSetup(scene, camera, renderer) {
+    this.loader = this.loader || new THREE.ObjectLoader();
+
+    this.pvm = this.pvm || this.loader.parse(PVM);
+    if(typeof this.screenMaterial === typeof undefined) {
+      let child = this.pvm.children[0].children[27];//TV Screen
+      this.screenMaterial = child.material;
+    }
+    this.pvm.position.x = 0.7;
+    this.pvm.position.z = -0.7;
+    scene.add(this.pvm);
+  }
+
+  onUpdate(scene, camera, renderer) {
+    var dur = 1500;
+    let time = new Date().getTime();
+    let t = (time % dur) / dur;
+    let h = ((time+dur/4) % dur) / dur;
+
+    let d;
+    let q;
+    if(t < 0.5) {
+      d = Easing.easeInOutQuad(t, 0, 1, 0.5);
+    } else {
+      d = Easing.easeInOutQuad(t-0.5, 1, -1, 0.5);
+    }
+
+    if(h < 0.5) {
+      q = Easing.easeInOutQuad(h, 0, 1, 0.5);
+    } else {
+      q = Easing.easeInOutQuad(h-0.5, 1, -1, 0.5);
+    }
+
+    this.pvm.rotation.x = THREE.Math.degToRad((d*10) - 90);
+    this.pvm.rotation.z = THREE.Math.degToRad(134-(q*2));
+    this.pvm.position.y = (0.5 - q)/11;
+
+    this.screenMaterial.color = new THREE.Color(q/8, q/4, 0.5+q/2);
+  }
+}
+
+export default AboutScene;

public/3d/scenes/SceneComponent.jsx

@@ -0,0 +1,101 @@
+/*
+ *  Scene Component
+ *    About that one lad.
+ *
+ *  Dependencies:
+ *    styles/components/_scene-component.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/04/08
+ */
+
+import React from 'react';
+import { connect } from 'react-redux';
+import * as THREE from 'three';
+
+class SceneComponet 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.renderer = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+
+    this.camera.position.z = 1;
+
+    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.3);
+    this.light.position.x = this.camera.position.x;
+    this.light.position.y = this.camera.position.y;
+    this.light.position.z = this.camera.position.z;
+    this.scene.add(this.light);
+
+    if(typeof this.onSetup !== typeof undefined) {
+      this.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.renderer.setSize(width, height);
+    this.renderer.setPixelRatio(window.devicePixelRatio);
+
+    this.camera.aspect = width / height;
+    this.camera.fov = vfovRad * 180 / Math.PI;
+    this.camera.updateProjectionMatrix();
+
+    if(typeof this.onUpdate !== typeof undefined) {
+      this.onUpdate(diff);
+    }
+
+    this.renderer.render(this.scene, this.camera);
+    this.lastTime = now;
+
+    requestAnimationFrame(this.onFrame.bind(this));
+  }
+
+  render() {
+    return (
+      <div className="c-scene-component">
+        <div className="c-scene-component__canvas-space" ref="canvasSpace"></div>
+        <canvas ref="canvas" className="c-scene-component__canvas">
+        </canvas>
+      </div>
+    );
+  }
+}
+
+export default SceneComponet;