Update, built Contact Page

public/components/sections/BlankPromo.jsx

@@ -0,0 +1,28 @@
+/*
+ *  BlankPromo
+ *    Blank Promo section.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-blank-promo.scss
+ *
+ *  Version:
+ *    1.0.0 - 2018/02/24
+ */
+
+import React from 'react';
+import Section from './../Section';
+
+class BlankPromo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <Section section="blank-promo" full>
+      </Section>
+    )
+  }
+}
+
+export default BlankPromo;

public/components/sections/PhoneSection.jsx

@@ -0,0 +1,62 @@
+/*
+ *  Poly
+ *    Poly styled section.
+ *
+ *  Dependencies:
+ *    styles/components/_section--style-phone.scss
+ *
+ *  Version:
+ *    1.1.0 - 2018/03/10
+ */
+import React from 'react';
+import ThreeSection from './ThreeSection';
+import * as THREE from 'three';
+import * as Easing from './../../animation/Easing';
+
+import PhoneModel from './../../3d/phone.json';
+
+class PhoneSection extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  onSetup(scene) {
+    this.loader = new THREE.JSONLoader();
+    this.data = this.loader.parse(PhoneModel);
+
+    this.material = new THREE.MeshLambertMaterial({
+      color: 0xff66ab
+    });
+
+    this.mesh = new THREE.Mesh(this.data.geometry, this.material);
+    this.mesh.position.z = 2;
+    scene.add(this.mesh);
+  }
+
+  getV(j) {
+    var x = new Date().getTime() % j;
+    var h = x;
+    if(x > (j/2)) h = (j/2) - (x - (j/2));
+    h *= 2;
+    return Easing.easeInOutQuart(h, 0, 1, j);
+  }
+
+  onRender(diff) {
+    this.mesh.rotation.set(
+      THREE.Math.degToRad(this.getV(25000)*5),
+      THREE.Math.degToRad(this.getV(15000)*10),
+      THREE.Math.degToRad(this.getV(40000)*20)
+    );
+  }
+
+  render() {
+    return (
+      <ThreeSection
+        onRender={this.onRender.bind(this)}
+        onSetup={this.onSetup.bind(this)}
+      />
+    )
+  }
+}
+
+export default PhoneSection;

public/components/sections/Poly.jsx

@@ -8,9 +8,8 @@
  *  Version:
  *    1.0.0 - 2018/02/24
  */
-
 import React from 'react';
-import Section from './../Section';
+import ThreeSection from './ThreeSection';
 import * as THREE from 'three';
 
 const CUBES = [
@@ -57,24 +56,17 @@ class Poly extends React.Component {
     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);
-
+  onSetup(scene) {
     this.cubes = [];
     this.outlines = [];
+
     for(var i = 0; i < CUBES.length; i++) {
       let c = CUBES[i];
 
       let geometry = new THREE.BoxGeometry(c.size[0],c.size[1],c.size[2]);
-
       let material = new THREE.MeshLambertMaterial( { color: c.color } );
       let cube = new THREE.Mesh(geometry, material);
+
       cube.position.x = c.pos[0];
       cube.position.y = c.pos[1];
       cube.position.z = c.pos[2];
@@ -82,7 +74,8 @@ class Poly extends React.Component {
       cube.rotation.y = Math.random()*360;
       cube.rotation.z = Math.random()*360;
       cube.velocity = c.velocity;
-      this.scene.add(cube);
+
+      scene.add(cube);
       this.cubes.push(cube);
 
       if(typeof c.outline !== typeof undefined) {
@@ -94,50 +87,13 @@ class Poly extends React.Component {
         outlineMesh.scale.multiplyScalar(1.05);
 
         this.outlines[i] = outlineMesh;
-        this.scene.add( outlineMesh );
+        scene.add( outlineMesh );
       }
     }
 
-    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);
-
-    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.camera.aspect = width / height;
-    this.camera.fov = vfovRad * 180 / Math.PI;
-    this.camera.updateProjectionMatrix();
-    requestAnimationFrame(this.onFrame.bind(this));
-    this.render.render(this.scene, this.camera);
-
+  onRender(diff) {
     for(var i = 0; i < this.cubes.length; i++) {
       let e = this.cubes[i];
       let o = this.outlines[i];
@@ -153,16 +109,14 @@ class Poly extends React.Component {
         o.rotation.z = e.rotation.z;
       }
     }
-    this.lastTime = now;
   }
 
   render() {
     return (
-      <Section section="poly" full>
-        <div className="c-section--style-poly__canvas" ref="canvasSpace"></div>
-        <canvas ref="canvas" className="c-section--style-poly__canvas">
-        </canvas>
-      </Section>
+      <ThreeSection
+        onRender={this.onRender.bind(this)}
+        onSetup={this.onSetup.bind(this)}
+      />
     )
   }
 }

public/components/sections/ThreeSection.jsx

@@ -0,0 +1,91 @@
+/*
+ *  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;