rayelliott
/
ThreeJS-Webpack-ES6-Boilerplate
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Refactored app js into folders, fixed three.js import for new version, minor changes after lint pass

This commit is contained in:
Paul Graffam 2016-10-06 23:14:07 -04:00
parent 2fba979793
commit 93156a8174
12 changed files with 114 additions and 112 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/app/camera.js → src/js/app/components/camera.js
View File

@ -1,6 +1,6 @@
import THREE from 'three';
import * as THREE from 'three';
import Config from './../data/config';
import Config from '../../data/config';
export default class Camera {
constructor(renderer) {
@ -17,7 +17,7 @@ export default class Camera {
}
updateSize(renderer) {
this.threeCamera.aspect = (renderer.domElement.width * Config.dpr) / (renderer.domElement.height * Config.dpr);
this.threeCamera.aspect = renderer.domElement.width * Config.dpr / renderer.domElement.height * Config.dpr;
this.threeCamera.updateProjectionMatrix();
}
}

6
src/js/app/controls.js → src/js/app/components/controls.js vendored
View File

@ -1,7 +1,7 @@
import THREE from 'three';
import * as THREE from 'three';
import OrbitControls from '../utils/orbitControls';
import Config from './../data/config';
import OrbitControls from '../../utils/orbitControls';
import Config from '../../data/config';
export default class Controls {
constructor(camera, container) {

4
src/js/app/light.js → src/js/app/components/light.js
View File

@ -1,6 +1,6 @@
import THREE from 'three';
import * as THREE from 'three';
import Config from './../data/config';
import Config from '../../data/config';
export default class Light {
constructor(scene) {

8
src/js/app/renderer.js → src/js/app/components/renderer.js
View File

@ -1,11 +1,11 @@
import THREE from 'three';
import * as THREE from 'three';
import Config from './../data/config';
import Config from '../../data/config';
export default class Renderer {
constructor(container, scene) {
this.container = container;
constructor(scene, container) {
this.scene = scene;
this.container = container;
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});

2
src/js/app/animation.js → src/js/app/helpers/animation.js
View File

@ -1,4 +1,4 @@
import THREE from 'three';
import * as THREE from 'three';
export default class Animation {
constructor(obj, clip) {

6
src/js/app/geometry.js → src/js/app/helpers/geometry.js
View File

@ -1,6 +1,6 @@
import THREE from 'three';
import * as THREE from 'three';
import Config from '../data/config';
import Config from '../../data/config';
export default class Geometry {
constructor(scene) {
@ -12,7 +12,7 @@ export default class Geometry {
if(type == 'plane') {
return (width, height, widthSegments = 1, heightSegments = 1) => {
this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
}
};
}
}

10
src/js/app/helper.js → src/js/app/helpers/helper.js
View File

@ -1,16 +1,16 @@
import THREE from 'three';
import * as THREE from 'three';
export default class Helper {
constructor(scene, mesh) {
let wireframe = new THREE.WireframeGeometry(mesh.geometry);
let wireLine = new THREE.LineSegments(wireframe);
const wireframe = new THREE.WireframeGeometry(mesh.geometry);
const wireLine = new THREE.LineSegments(wireframe);
wireLine.material.depthTest = false;
wireLine.material.opacity = 0.25;
wireLine.material.transparent = true;
mesh.add(wireLine);
let edges = new THREE.EdgesGeometry(mesh.geometry);
let edgesLine = new THREE.LineSegments(edges);
const edges = new THREE.EdgesGeometry(mesh.geometry);
const edgesLine = new THREE.LineSegments(edges);
edgesLine.material.depthTest = false;
edgesLine.material.opacity = 0.25;
edgesLine.material.transparent = true;

4
src/js/app/material.js → src/js/app/helpers/material.js
View File

@ -1,6 +1,6 @@
import THREE from 'three';
import * as THREE from 'three';
import Config from './../data/config';
import Config from '../../data/config';
export default class Material {
constructor() {

122
src/js/app/gui.js → src/js/app/managers/datGUI.js
View File

@ -1,8 +1,8 @@
import Config from './../data/config';
import Config from '../../data/config';
export default class GUI {
export default class DatGUI {
constructor(main, mesh) {
let gui = new dat.GUI();
const gui = new dat.GUI();
this.camera = main.camera.threeCamera;
this.controls = main.controls.threeControls;
@ -12,61 +12,61 @@ export default class GUI {
//gui.close();
/* Camera */
let cameraFolder = gui.addFolder('Camera');
let cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV');
const cameraFolder = gui.addFolder('Camera');
const cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV');
cameraFOVGui.onChange((value) => {
this.controls.enableRotate = false;
this.camera.fov = value;
});
cameraFOVGui.onFinishChange((value) => {
cameraFOVGui.onFinishChange(() => {
this.camera.updateProjectionMatrix();
this.controls.enableRotate = true;
});
let cameraAspectGui = cameraFolder.add(Config.camera, 'aspect', 0, 4).name('Camera Aspect');
const cameraAspectGui = cameraFolder.add(Config.camera, 'aspect', 0, 4).name('Camera Aspect');
cameraAspectGui.onChange((value) => {
this.controls.enableRotate = false;
this.camera.aspect = value;
});
cameraAspectGui.onFinishChange((value) => {
cameraAspectGui.onFinishChange(() => {
this.camera.updateProjectionMatrix();
this.controls.enableRotate = true;
});
let cameraFogColorGui = cameraFolder.addColor(Config.fog, 'color').name('Fog Color');
const cameraFogColorGui = cameraFolder.addColor(Config.fog, 'color').name('Fog Color');
cameraFogColorGui.onChange((value) => {
main.scene.fog.color.setHex(value);
});
let cameraFogNearGui = cameraFolder.add(Config.fog, 'near', 0.000, 0.010).name('Fog Near');
const cameraFogNearGui = cameraFolder.add(Config.fog, 'near', 0.000, 0.010).name('Fog Near');
cameraFogNearGui.onChange((value) => {
this.controls.enableRotate = false;
main.scene.fog.density = value;
});
cameraFogNearGui.onFinishChange((value) => {
cameraFogNearGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
/* Controls */
let controlsFolder = gui.addFolder('Controls');
const controlsFolder = gui.addFolder('Controls');
controlsFolder.add(Config.controls, 'autoRotate').name('Auto Rotate').onChange((value) => {
this.controls.autoRotate = value;
});
let controlsAutoRotateSpeedGui = controlsFolder.add(Config.controls, 'autoRotateSpeed', -1, 1).name('Rotation Speed');
const controlsAutoRotateSpeedGui = controlsFolder.add(Config.controls, 'autoRotateSpeed', -1, 1).name('Rotation Speed');
controlsAutoRotateSpeedGui.onChange((value) => {
this.controls.enableRotate = false;
this.controls.autoRotateSpeed = value;
});
controlsAutoRotateSpeedGui.onFinishChange((value) => {
controlsAutoRotateSpeedGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
/* Mesh */
let meshFolder = gui.addFolder('Mesh');
const meshFolder = gui.addFolder('Mesh');
meshFolder.add(Config.mesh, 'translucent', true).name('Translucent').onChange((value) => {
if(value) {
mesh.material.transparent = true;
@ -82,7 +82,7 @@ export default class GUI {
/* Lights */
// Ambient Light
let ambientLightFolder = gui.addFolder('Ambient Light');
const ambientLightFolder = gui.addFolder('Ambient Light');
ambientLightFolder.add(Config.ambientLight, 'enabled').name('Enabled').onChange((value) => {
this.light.ambientLight.visible = value;
});
@ -92,137 +92,137 @@ export default class GUI {
// Directional Light
let directionalLightFolder = gui.addFolder('Directional Light');
const directionalLightFolder = gui.addFolder('Directional Light');
directionalLightFolder.add(Config.directionalLight, 'enabled').name('Enabled').onChange((value) => {
this.light.directionalLight.visible = value;
});
directionalLightFolder.addColor(Config.directionalLight, 'color').name('Color').onChange((value) => {
this.light.directionalLight.color.setHex(value);
});
let directionalLightIntensityGui = directionalLightFolder.add(Config.directionalLight, 'intensity', 0, 2).name('Intensity');
const directionalLightIntensityGui = directionalLightFolder.add(Config.directionalLight, 'intensity', 0, 2).name('Intensity');
directionalLightIntensityGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.intensity = value;
});
directionalLightIntensityGui.onFinishChange((value) => {
directionalLightIntensityGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let directionalLightPositionXGui = directionalLightFolder.add(Config.directionalLight, 'x', -1000, 1000).name('Position X');
const directionalLightPositionXGui = directionalLightFolder.add(Config.directionalLight, 'x', -1000, 1000).name('Position X');
directionalLightPositionXGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.position.x = value;
});
directionalLightPositionXGui.onFinishChange((value) => {
directionalLightPositionXGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let directionalLightPositionYGui = directionalLightFolder.add(Config.directionalLight, 'y', -1000, 1000).name('Position Y');
const directionalLightPositionYGui = directionalLightFolder.add(Config.directionalLight, 'y', -1000, 1000).name('Position Y');
directionalLightPositionYGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.position.y = value;
});
directionalLightPositionYGui.onFinishChange((value) => {
directionalLightPositionYGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let directionalLightPositionZGui = directionalLightFolder.add(Config.directionalLight, 'z', -1000, 1000).name('Position Z');
const directionalLightPositionZGui = directionalLightFolder.add(Config.directionalLight, 'z', -1000, 1000).name('Position Z');
directionalLightPositionZGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.position.z = value;
});
directionalLightPositionZGui.onFinishChange((value) => {
directionalLightPositionZGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
// Shadow Map
let shadowFolder = gui.addFolder('Shadow Map');
const shadowFolder = gui.addFolder('Shadow Map');
shadowFolder.add(Config.shadow, 'enabled').name('Enabled').onChange((value) => {
this.light.directionalLight.castShadow = value;
});
shadowFolder.add(Config.shadow, 'helperEnabled').name('Helper Enabled').onChange((value) => {
this.light.directionalLightHelper.visible = value;
});
let shadowNearGui = shadowFolder.add(Config.shadow, 'near', 0, 100).name('Near');
const shadowNearGui = shadowFolder.add(Config.shadow, 'near', 0, 100).name('Near');
shadowNearGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.near = value;
});
shadowNearGui.onFinishChange((value) => {
shadowNearGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowFarGui = shadowFolder.add(Config.shadow, 'far', 0, 1200).name('Far');
const shadowFarGui = shadowFolder.add(Config.shadow, 'far', 0, 1200).name('Far');
shadowFarGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.far = value;
});
shadowFarGui.onFinishChange((value) => {
shadowFarGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowTopGui = shadowFolder.add(Config.shadow, 'top', -400, 400).name('Top');
const shadowTopGui = shadowFolder.add(Config.shadow, 'top', -400, 400).name('Top');
shadowTopGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.top = value;
});
shadowTopGui.onFinishChange((value) => {
shadowTopGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowRightGui = shadowFolder.add(Config.shadow, 'right', -400, 400).name('Right');
const shadowRightGui = shadowFolder.add(Config.shadow, 'right', -400, 400).name('Right');
shadowRightGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.right = value;
});
shadowRightGui.onFinishChange((value) => {
shadowRightGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowBottomGui = shadowFolder.add(Config.shadow, 'bottom', -400, 400).name('Bottom');
const shadowBottomGui = shadowFolder.add(Config.shadow, 'bottom', -400, 400).name('Bottom');
shadowBottomGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.bottom = value;
});
shadowBottomGui.onFinishChange((value) => {
shadowBottomGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowLeftGui = shadowFolder.add(Config.shadow, 'left', -400, 400).name('Left');
const shadowLeftGui = shadowFolder.add(Config.shadow, 'left', -400, 400).name('Left');
shadowLeftGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.camera.left = value;
});
shadowLeftGui.onFinishChange((value) => {
shadowLeftGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
this.light.directionalLightHelper.update();
});
let shadowBiasGui = shadowFolder.add(Config.shadow, 'bias', -0.000010, 1).name('Bias');
const shadowBiasGui = shadowFolder.add(Config.shadow, 'bias', -0.000010, 1).name('Bias');
shadowBiasGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.directionalLight.shadow.bias = value;
});
shadowBiasGui.onFinishChange((value) => {
shadowBiasGui.onFinishChange(() => {
this.controls.enableRotate = true;
this.light.directionalLight.shadow.map.dispose();
this.light.directionalLight.shadow.map = null;
@ -231,62 +231,62 @@ export default class GUI {
// Point Light
let pointLightFolder = gui.addFolder('Point Light');
const pointLightFolder = gui.addFolder('Point Light');
pointLightFolder.add(Config.pointLight, 'enabled').name('Enabled').onChange((value) => {
this.light.pointLight.visible = value;
});
pointLightFolder.addColor(Config.pointLight, 'color').name('Color').onChange((value) => {
this.light.pointLight.color.setHex(value);
});
let pointLightIntensityGui = pointLightFolder.add(Config.pointLight, 'intensity', 0, 2).name('Intensity');
const pointLightIntensityGui = pointLightFolder.add(Config.pointLight, 'intensity', 0, 2).name('Intensity');
pointLightIntensityGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.pointLight.intensity = value;
});
pointLightIntensityGui.onFinishChange((value) => {
pointLightIntensityGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let pointLightDistanceGui = pointLightFolder.add(Config.pointLight, 'distance', 0, 1000).name('Distance');
const pointLightDistanceGui = pointLightFolder.add(Config.pointLight, 'distance', 0, 1000).name('Distance');
pointLightDistanceGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.pointLight.distance = value;
});
pointLightDistanceGui.onFinishChange((value) => {
pointLightDistanceGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let pointLightPositionXGui = pointLightFolder.add(Config.pointLight, 'x', -1000, 1000).name('Position X');
const pointLightPositionXGui = pointLightFolder.add(Config.pointLight, 'x', -1000, 1000).name('Position X');
pointLightPositionXGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.pointLight.position.x = value;
});
pointLightPositionXGui.onFinishChange((value) => {
pointLightPositionXGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let pointLightPositionYGui = pointLightFolder.add(Config.pointLight, 'y', -1000, 1000).name('Position Y');
const pointLightPositionYGui = pointLightFolder.add(Config.pointLight, 'y', -1000, 1000).name('Position Y');
pointLightPositionYGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.pointLight.position.y = value;
});
pointLightPositionYGui.onFinishChange((value) => {
pointLightPositionYGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let pointLightPositionZGui = pointLightFolder.add(Config.pointLight, 'z', -1000, 1000).name('Position Z');
const pointLightPositionZGui = pointLightFolder.add(Config.pointLight, 'z', -1000, 1000).name('Position Z');
pointLightPositionZGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.pointLight.position.z = value;
});
pointLightPositionZGui.onFinishChange((value) => {
pointLightPositionZGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
// Hemi Light
let hemiLightFolder = gui.addFolder('Hemi Light');
const hemiLightFolder = gui.addFolder('Hemi Light');
hemiLightFolder.add(Config.hemiLight, 'enabled').name('Enabled').onChange((value) => {
this.light.hemiLight.visible = value;
});
@ -296,40 +296,40 @@ export default class GUI {
hemiLightFolder.addColor(Config.hemiLight, 'groundColor').name('ground Color').onChange((value) => {
this.light.hemiLight.groundColor.setHex(value);
});
let hemiLightIntensityGui = hemiLightFolder.add(Config.hemiLight, 'intensity', 0, 2).name('Intensity');
const hemiLightIntensityGui = hemiLightFolder.add(Config.hemiLight, 'intensity', 0, 2).name('Intensity');
hemiLightIntensityGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.hemiLight.intensity = value;
});
hemiLightIntensityGui.onFinishChange((value) => {
hemiLightIntensityGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let hemiLightPositionXGui = hemiLightFolder.add(Config.hemiLight, 'x', -1000, 1000).name('Position X');
const hemiLightPositionXGui = hemiLightFolder.add(Config.hemiLight, 'x', -1000, 1000).name('Position X');
hemiLightPositionXGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.hemiLight.position.x = value;
});
hemiLightPositionXGui.onFinishChange((value) => {
hemiLightPositionXGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let hemiLightPositionYGui = hemiLightFolder.add(Config.hemiLight, 'y', -500, 1000).name('Position Y');
const hemiLightPositionYGui = hemiLightFolder.add(Config.hemiLight, 'y', -500, 1000).name('Position Y');
hemiLightPositionYGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.hemiLight.position.y = value;
});
hemiLightPositionYGui.onFinishChange((value) => {
hemiLightPositionYGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
let hemiLightPositionZGui = hemiLightFolder.add(Config.hemiLight, 'z', -1000, 1000).name('Position Z');
const hemiLightPositionZGui = hemiLightFolder.add(Config.hemiLight, 'z', -1000, 1000).name('Position Z');
hemiLightPositionZGui.onChange((value) => {
this.controls.enableRotate = false;
this.light.hemiLight.position.z = value;
});
hemiLightPositionZGui.onFinishChange((value) => {
hemiLightPositionZGui.onFinishChange(() => {
this.controls.enableRotate = true;
});
}
@ -363,7 +363,7 @@ export default class GUI {
};
}
update() {
update(mesh) {
this.needsUpdate(mesh.material, mesh.geometry);
}
}

34
src/js/app/interaction.js → src/js/app/managers/interaction.js
View File

@ -1,54 +1,56 @@
import THREE from 'three';
import Keyboard from './../utils/keyboard';
import Helpers from './../utils/helpers';
import Config from './../data/config';
import Keyboard from '../../utils/keyboard';
import Helpers from '../../utils/helpers';
import Config from '../../data/config';
export default class Interaction {
constructor(renderer, scene, camera, controls) {
// Properties
this.renderer = renderer;
this.scene = scene;
this.camera = camera;
this.controls = controls;
// Instantiate keyboard helper
this.keyboard = new Keyboard();
// listeners
// mouse events
// Listeners
// Mouse events
this.renderer.domElement.addEventListener('mouseup', (event) => this.onMouseUp(event), false);
this.renderer.domElement.addEventListener('mousemove', (event) => Helpers.throttle(this.onMouseMove(event), 250), false);
this.renderer.domElement.addEventListener('mouseenter', (event) => this.onMouseEnter(event), false);
this.renderer.domElement.addEventListener('mouseleave', (event) => this.onMouseLeave(event), false);
this.renderer.domElement.addEventListener('mouseover', (event) => this.onMouseOver(event), false);
// keyboard events
// Keyboard events
this.keyboard.domElement.addEventListener('keydown', (event) => {
if(event.repeat) {
return;
}
if(this.keyboard.eventMatches(event, 'escape')) {
console.log('Escape pressed');
}
});
}
onMouseEnter(event) {
event.preventDefault();
}
onMouseOver(event) {
event.preventDefault();
Config.isMouseOver = true;
}
onMouseLeave(event) {
event.preventDefault();
Config.isMouseOver = false;
}
onMouseMove(event) {
event.preventDefault();
}
onMouseUp(event) {
event.preventDefault();
setTimeout(function() {
Config.isMouseMoving = false;
}, 200);
Config.isMouseMoving = true;
}
}

16
src/js/app/model.js → src/js/app/model/model.js
View File

@ -1,8 +1,8 @@
import THREE from 'three';
import * as THREE from 'three';
import Material from './material';
import Helper from './helper';
import Config from './../data/config';
import Material from '../helpers/material';
import Helper from '../helpers/helper';
import Config from '../../data/config';
export default class Model {
constructor(scene, manager, textures) {
@ -18,7 +18,7 @@ export default class Model {
this.loader.load(Config.model.path, (obj) => {
obj.traverse((child) => {
if(child instanceof THREE.Mesh) {
let material = new Material().standard;
const material = new Material().standard;
material.map = this.textures.UV;
child.material = material;
@ -45,13 +45,13 @@ export default class Model {
static onProgress(xhr) {
if(xhr.lengthComputable) {
let percentComplete = xhr.loaded / xhr.total * 100;
const percentComplete = xhr.loaded / xhr.total * 100;
console.log(Math.round(percentComplete, 2) + '% downloaded');
}
};
}
static onError(xhr) {
console.error(xhr);
};
}
}

8
src/js/app/texture.js → src/js/app/model/texture.js
View File

@ -1,7 +1,7 @@
import THREE from 'three';
import * as THREE from 'three';
import { Promise } from 'es6-promise';
import Config from './../data/config';
import Config from '../../data/config';
export default class Texture {
constructor() {
@ -13,7 +13,7 @@ export default class Texture {
const maxAnisotropy = Config.maxAnisotropy;
const imageFiles = Config.texture.imageFiles;
let promiseArray = [];
const promiseArray = [];
loader.setPath(Config.texture.path);
@ -30,7 +30,7 @@ export default class Texture {
resolve(modelOBJ);
},
function(xhr) {
console.log(( xhr.loaded / xhr.total * 100 ) + '% loaded');
console.log(xhr.loaded / xhr.total * 100 + '% loaded');
},
function(xhr) {
reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));