diff --git a/src/js/app/model/model.js b/src/js/app/model/model.js index 6b76418..7faa809 100644 --- a/src/js/app/model/model.js +++ b/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 - this.loader.load(Config.model.path, (obj) => { - obj.traverse((child) => { + // Load model with ObjectLoader + this.loader.load(Config.model.path, obj => { + 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); - } - - 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); + }, Helpers.logProgress(), Helpers.logError()); } } diff --git a/src/js/app/model/texture.js b/src/js/app/model/texture.js index ea35a12..59fafbe 100644 --- a/src/js/app/model/texture.js +++ b/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, - - function(texture) { + // This gets called on load with the loaded 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) { - console.log(xhr.loaded / xhr.total * 100 + '% loaded'); - }, - function(xhr) { - reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image)); - } + Helpers.logProgress(), + xhr => reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image)) ) })); }); - return Promise.all(promiseArray).then((textures) => { - for(var i = 0; i < textures.length; i++) { + // Iterate through all Promises in array and return another Promise when all have resolved or console log reason when any reject + 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)); } }