Set to use Helper static methods, commented and updated

src/js/app/model/model.js

@@ -1,27 +1,32 @@
 import * as THREE from 'three';
 
 import Material from '../helpers/material';
-import Helper from '../helpers/helper';
+import MeshHelper from '../helpers/meshHelper';
+import Helpers from '../../utils/helpers';
 import Config from '../../data/config';
 
+// Loads in a single object from the config file
 export default class Model {
   constructor(scene, manager, textures) {
     this.scene = scene;
     this.textures = textures;
 
+    // Manager is passed in to loader to determine when loading done in main
     this.loader = new THREE.ObjectLoader(manager);
     this.obj = null;
   }
 
   load() {
-    // load a resource
+    // Load model with ObjectLoader
-    this.loader.load(Config.model.path, (obj) => {
+    this.loader.load(Config.model.path, obj => {
-      obj.traverse((child) => {
+      obj.traverse(child => {
         if(child instanceof THREE.Mesh) {
+          // Create material for mesh and grab texture by name from preloaded textures
           const material = new Material().standard;
           material.map = this.textures.UV;
           child.material = material;
 
+          // Set to cast and receive shadow if enabled
           if(Config.shadow.enabled) {
             child.receiveShadow = true;
             child.castShadow = true;
@@ -29,29 +34,16 @@ export default class Model {
         }
       });
 
+      // Add mesh helper if Dev
       if(Config.isDev && Config.mesh.enableHelper) {
-        new Helper(this.scene, obj);
+        new MeshHelper(this.scene, obj);
       }
 
-      // set prop to obj
+      // Set prop to obj
       this.obj = obj;
 
       obj.scale.multiplyScalar(Config.model.scale);
-
-      // add object to scene
       this.scene.add(obj);
-    }, Model.onProgress, Model.onError);
+    }, Helpers.logProgress(), Helpers.logError());
-  }
-
-  static onProgress(xhr) {
-    if(xhr.lengthComputable) {
-      const percentComplete = xhr.loaded / xhr.total * 100;
-
-      console.log(Math.round(percentComplete, 2) + '% downloaded');
-    }
-  }
-
-  static onError(xhr) {
-    console.error(xhr);
   }
 }

src/js/app/model/texture.js

@@ -1,8 +1,14 @@
 import * as THREE from 'three';
+// Promise polyfill for IE
 import { Promise } from 'es6-promise';
 
+import Helpers from '../../utils/helpers';
 import Config from '../../data/config';
 
+// This class preloads all textures in the imageFiles array in Config via ES6 Promises.
+// Once all textures are done loading the model itself will be loaded with the Promise .then() callback.
+// Using promises to preload textures prevents issues of loading and applying textures to materials
+// before the textures have loaded.
 export default class Texture {
   constructor() {
     this.textures = {};
@@ -17,32 +23,33 @@ export default class Texture {
 
     loader.setPath(Config.texture.path);
 
-    imageFiles.forEach((imageFile) => {
+    imageFiles.forEach(imageFile => {
+      // Add an individual Promise for each image in array
       promiseArray.push(new Promise((resolve, reject) => {
+        // Each Promise will attempt to load the image file
         loader.load(imageFile.image,
-
+          // This gets called on load with the loaded texture
-          function(texture) {
+          texture => {
             texture.anisotropy = maxAnisotropy;
 
-            var modelOBJ = {};
+            // Resolve Promise with object of texture if it is instance of THREE.Texture
+            const modelOBJ = {};
             modelOBJ[imageFile.name] = texture;
             if(modelOBJ[imageFile.name] instanceof THREE.Texture)
               resolve(modelOBJ);
           },
-          function(xhr) {
+          Helpers.logProgress(),
-            console.log(xhr.loaded / xhr.total * 100 + '% loaded');
+          xhr => reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image))
-          },
-          function(xhr) {
-            reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));
-          }
         )
       }));
     });
 
-    return Promise.all(promiseArray).then((textures) => {
+    // Iterate through all Promises in array and return another Promise when all have resolved or console log reason when any reject
-      for(var i = 0; i < textures.length; i++) {
+    return Promise.all(promiseArray).then(textures => {
+      // Set the textures prop object to have name be the resolved texture
+      for(let i = 0; i < textures.length; i++) {
         this.textures[Object.keys(textures[i])[0]] = textures[i][Object.keys(textures[i])[0]];
       }
-    });
+    }, reason => console.log(reason));
   }
 }