Set to use Helper static methods, commented and updated
This commit is contained in:
parent
0b556be6bc
commit
ac06ae8cbd
|
@ -1,27 +1,32 @@
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
import Material from '../helpers/material';
|
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';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Loads in a single object from the config file
|
||||||
export default class Model {
|
export default class Model {
|
||||||
constructor(scene, manager, textures) {
|
constructor(scene, manager, textures) {
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
this.textures = textures;
|
this.textures = textures;
|
||||||
|
|
||||||
|
// Manager is passed in to loader to determine when loading done in main
|
||||||
this.loader = new THREE.ObjectLoader(manager);
|
this.loader = new THREE.ObjectLoader(manager);
|
||||||
this.obj = null;
|
this.obj = null;
|
||||||
}
|
}
|
||||||
|
|
||||||
load() {
|
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) {
|
if(child instanceof THREE.Mesh) {
|
||||||
|
// Create material for mesh and grab texture by name from preloaded textures
|
||||||
const material = new Material().standard;
|
const material = new Material().standard;
|
||||||
material.map = this.textures.UV;
|
material.map = this.textures.UV;
|
||||||
child.material = material;
|
child.material = material;
|
||||||
|
|
||||||
|
// Set to cast and receive shadow if enabled
|
||||||
if(Config.shadow.enabled) {
|
if(Config.shadow.enabled) {
|
||||||
child.receiveShadow = true;
|
child.receiveShadow = true;
|
||||||
child.castShadow = true;
|
child.castShadow = true;
|
||||||
|
@ -29,29 +34,16 @@ export default class Model {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Add mesh helper if Dev
|
||||||
if(Config.isDev && Config.mesh.enableHelper) {
|
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;
|
this.obj = obj;
|
||||||
|
|
||||||
obj.scale.multiplyScalar(Config.model.scale);
|
obj.scale.multiplyScalar(Config.model.scale);
|
||||||
|
|
||||||
// add object to scene
|
|
||||||
this.scene.add(obj);
|
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);
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
// Promise polyfill for IE
|
||||||
import { Promise } from 'es6-promise';
|
import { Promise } from 'es6-promise';
|
||||||
|
|
||||||
|
import Helpers from '../../utils/helpers';
|
||||||
import Config from '../../data/config';
|
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 {
|
export default class Texture {
|
||||||
constructor() {
|
constructor() {
|
||||||
this.textures = {};
|
this.textures = {};
|
||||||
|
@ -17,32 +23,33 @@ export default class Texture {
|
||||||
|
|
||||||
loader.setPath(Config.texture.path);
|
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) => {
|
promiseArray.push(new Promise((resolve, reject) => {
|
||||||
|
// Each Promise will attempt to load the image file
|
||||||
loader.load(imageFile.image,
|
loader.load(imageFile.image,
|
||||||
|
// This gets called on load with the loaded texture
|
||||||
function(texture) {
|
texture => {
|
||||||
texture.anisotropy = maxAnisotropy;
|
texture.anisotropy = maxAnisotropy;
|
||||||
|
|
||||||
var modelOBJ = {};
|
// Resolve Promise with object of texture if it is instance of THREE.Texture
|
||||||
|
const modelOBJ = {};
|
||||||
modelOBJ[imageFile.name] = texture;
|
modelOBJ[imageFile.name] = texture;
|
||||||
if(modelOBJ[imageFile.name] instanceof THREE.Texture)
|
if(modelOBJ[imageFile.name] instanceof THREE.Texture)
|
||||||
resolve(modelOBJ);
|
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]];
|
this.textures[Object.keys(textures[i])[0]] = textures[i][Object.keys(textures[i])[0]];
|
||||||
}
|
}
|
||||||
});
|
}, reason => console.log(reason));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue