YourWishes/domsPlace
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactoring a lot of code

Browse Source
This commit is contained in:
Dominic Masters
2018-04-09 07:05:06 +10:00
parent 914b1beef8
commit 63d1e21b9a
26 changed files with 314 additions and 406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
public/components/sections/CenterSection.jsx
View File

@ -1,28 +0,0 @@
/*
* Center Section
* Section for centered items.
*
* Dependencies:
* styles/components/_section--style-center.scss
*
* Version:
* 1.0.0 - 2018/03/21
*/
import React from 'react';
import Section from './../Section';
class CenterSection extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<Section section="center" className={this.props.className}>
</Section>
)
}
}
export default CenterSection;

62
public/components/sections/PhoneSection.jsx
View File

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

136
public/components/sections/Poly.jsx
View File

@ -1,136 +0,0 @@
/*
* Poly
* Poly styled section.
*
* Dependencies:
* styles/components/_section--style-poly.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import ThreeSection from './ThreeSection';
import * as THREE from 'three';
import pvm from './../../3d/pvm.json';
import staticGIF from './../../images/static.gif';
const CUBES = [
{
size: [1, 1, 1],
pos: [-4,-1,1],
velocity: [0.3, 0.1, 0],
color: 0xFFFFFF,
pvm: true
},
{
size: [1, 1, 1],
pos: [0.5,-0,-0.3],
velocity: [-0.3, 0.05, 0.1],
color: 0xCCFFFF,
pvm: true
},
{
size: [1, 1, 1],
pos: [-3,1,0.3],
velocity: [0.2, 0.5, 0],
color: 0xaaffb9,
pvm: true
},
{
size: [0.8, 0.8, 0.8],
pos: [3.4,-0.6,0.3],
velocity: [1, 0.1, -0.1],
color: 0xff66ab,
pvm: true
}
];
class Poly extends React.Component {
constructor(props) {
super(props);
}
onSetup(scene) {
this.cubes = [];
this.outlines = [];
this.loader = this.loader || new THREE.ObjectLoader();
this.textureLoader = new THREE.TextureLoader();
this.pvmData = this.pvmData || this.loader.parse(pvm);
this.pvmData.scale.multiplyScalar(1.5);
console.log(staticGIF);
for(var i = 0; i < CUBES.length; i++) {
let c = CUBES[i];
let cube;
if(c.pvm) {
cube = this.pvmData.clone();
let children = cube.children[0].children;
if(typeof this.screenMaterial === typeof undefined) {
let child = children[27];//TV Screen
this.screenMaterial = child.material;
}
} else {
let geometry = new THREE.BoxGeometry(c.size[0],c.size[1],c.size[2]);
let material = new THREE.MeshLambertMaterial( { color: c.color } );
cube = new THREE.Mesh(geometry, material);
}
cube.position.x = c.pos[0];
cube.position.y = c.pos[1];
cube.position.z = c.pos[2];
cube.rotation.x = Math.random()*360;
cube.rotation.y = Math.random()*360;
cube.rotation.z = Math.random()*360;
cube.velocity = c.velocity;
scene.add(cube);
this.cubes.push(cube);
if(typeof c.outline !== typeof undefined) {
let outline = new THREE.MeshBasicMaterial( { color: c.outline, side: THREE.BackSide } );
let outlineMesh = new THREE.Mesh( geometry, outline );
outlineMesh.position.x = cube.position.x;
outlineMesh.position.y = cube.position.y;
outlineMesh.position.z = cube.position.z;
outlineMesh.scale.multiplyScalar(1.05);
this.outlines[i] = outlineMesh;
scene.add( outlineMesh );
}
}
}
onRender(diff) {
for(var i = 0; i < this.cubes.length; i++) {
let e = this.cubes[i];
let o = this.outlines[i];
let c = CUBES[i];
e.rotation.x += c.velocity[0] * diff;
e.rotation.y += c.velocity[1] * diff;
e.rotation.z += c.velocity[2] * diff;
if(typeof o !== typeof undefined) {
o.rotation.x = e.rotation.x;
o.rotation.y = e.rotation.y;
o.rotation.z = e.rotation.z;
}
}
}
render() {
return (
<ThreeSection
onRender={this.onRender.bind(this)}
onSetup={this.onSetup.bind(this)}
/>
)
}
}
export default Poly;

92
public/components/sections/ThreeSection.jsx
View File

@ -1,92 +0,0 @@
/*
* 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.renderer = new THREE.WebGLRenderer({canvas: this.refs.canvas, alpha: true});
this.renderer.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.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 + 5;
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.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.props.onRender !== typeof undefined) {
this.props.onRender(diff);
}
this.renderer.render(this.scene, this.camera);
this.lastTime = now;
//requestAnimationFrame(this.onFrame.bind(this));
}
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;

50
public/components/sections/TitleSection.jsx Normal file
View File

@ -0,0 +1,50 @@
/*
* Title Section
* Simple title section used for most pages.
*
* Dependencies:
* styles/components/_section--style-title.scss
*
* Version:
* 1.0.0 - 2018/02/24
*/
import React from 'react';
import { connect } from 'react-redux';
import Language from './../../language/Language';
import Section from './../Section';
class TitleSection extends React.Component {
constructor(props) {
super(props);
}
render() {
let children = [];
if(this.props.scene) {
//3D Model to add to the title, naisu
children.push(
<div className="c-section--style-title__model-container" key="model">
{ this.props.scene }
</div>
);
}
return (
<Section section="title">
<h1 className="c-section--style-title__title">
{ Language.get(this.props.title) }
</h1>
{ children }
</Section>
)
}
}
const mapStateToProps = function(state) {
return { code: state.language.code }
}
export default connect(mapStateToProps)(TitleSection);