Fixed Three.js import, updated file imports, commented code

This commit is contained in:
Paul Graffam 2016-10-06 23:15:00 -04:00
parent 93156a8174
commit 9bc1583877
1 changed files with 48 additions and 30 deletions

View File

@ -1,32 +1,43 @@
// global imports // Global imports -
import THREE from 'three'; import * as THREE from 'three';
import TWEEN from 'tween.js'; import TWEEN from 'tween.js';
// local imports // Local imports -
import Renderer from './renderer'; // Components
import Camera from './camera'; import Renderer from './components/renderer';
import Light from './light'; import Camera from './components/camera';
import Controls from './controls'; import Light from './components/light';
import Geometry from './geometry'; import Controls from './components/controls';
import Texture from './texture';
import Model from './model'; // Helpers
import Interaction from './interaction'; import Geometry from './helpers/geometry';
import GUI from './gui';
// Model
import Texture from './model/texture';
import Model from './model/model';
// Managers
import Interaction from './managers/interaction';
import DatGUI from './managers/datGUI';
// data // data
import Config from './../data/config'; import Config from './../data/config';
// -- End imports
// stats // Local vars for rStats
let rS, bS, glS, tS; let rS, bS, glS, tS;
// This is the main class that ties all of the components together and renders the loop
export default class Main { export default class Main {
constructor(container) { constructor(container) {
// Set container property to container element
this.container = container; this.container = container;
// Start Three clock // Start Three clock
this.clock = new THREE.Clock(); this.clock = new THREE.Clock();
// Main scene // Main scene creation
this.scene = new THREE.Scene(); this.scene = new THREE.Scene();
this.scene.fog = new THREE.FogExp2(Config.fog.color, Config.fog.near); this.scene.fog = new THREE.FogExp2(Config.fog.color, Config.fog.near);
@ -35,26 +46,26 @@ export default class Main {
Config.dpr = window.devicePixelRatio; Config.dpr = window.devicePixelRatio;
} }
// Main renderer // Main renderer instantiation
this.renderer = new Renderer(container, this.scene); this.renderer = new Renderer(this.scene, container);
// Components // Components instantiation
this.camera = new Camera(this.renderer.threeRenderer); this.camera = new Camera(this.renderer.threeRenderer);
this.controls = new Controls(this.camera.threeCamera, this.container); this.controls = new Controls(this.camera.threeCamera, container);
this.light = new Light(this.scene); this.light = new Light(this.scene);
// Place lights // Create and place lights in scene
const lights = ['ambient', 'directional', 'point', 'hemi']; const lights = ['ambient', 'directional', 'point', 'hemi'];
for(let i = 0; i < lights.length; i++) { for(let i = 0; i < lights.length; i++) {
this.light.place(lights[i]); this.light.place(lights[i]);
} }
// Place geo // Create and place geo in scene
this.geometry = new Geometry(this.scene); this.geometry = new Geometry(this.scene);
this.geometry.make('plane')(100, 100, 10, 10); this.geometry.make('plane')(100, 100, 10, 10);
this.geometry.place([0, -20, 0], [Math.PI/2, 0, 0]); this.geometry.place([0, -20, 0], [Math.PI/2, 0, 0]);
// Set up stats if dev // Set up rStats if dev environment
if(Config.isDev) { if(Config.isDev) {
bS = new BrowserStats(); bS = new BrowserStats();
glS = new glStats(); glS = new glStats();
@ -82,11 +93,14 @@ export default class Main {
}); });
} }
// Instantiate texture class
this.texture = new Texture(); this.texture = new Texture();
// Start loading the textures // Start loading the textures
this.texture.load().then(() => { this.texture.load().then(() => {
this.manager = new THREE.LoadingManager(); this.manager = new THREE.LoadingManager();
// Textures loaded, load main model
// Textures loaded, load model
this.model = new Model(this.scene, this.manager, this.texture.textures); this.model = new Model(this.scene, this.manager, this.texture.textures);
this.model.load(); this.model.load();
@ -97,23 +111,27 @@ export default class Main {
// All loaders done // All loaders done
this.manager.onLoad = () => { this.manager.onLoad = () => {
// Set up interaction with app // Set up interaction manager with app now that the model is finished loading
new Interaction(this.renderer.threeRenderer, this.scene, this.camera.threeCamera, this.controls.threeControls); new Interaction(this.renderer.threeRenderer, this.scene, this.camera.threeCamera, this.controls.threeControls);
// Add dat.GUI controls if dev as helper
if(Config.isDev) { if(Config.isDev) {
new GUI(this, this.model.obj); new DatGUI(this, this.model.obj);
} }
// Fully loaded
Config.isLoaded = true; Config.isLoaded = true;
}; };
}); });
// Start render which does not wait for model fully loaded
this.render(); this.render();
} }
render() { render() {
const delta = this.clock.getDelta(); const delta = this.clock.getDelta();
// Render rStats if Dev
if(Config.isDev) { if(Config.isDev) {
rS('frame').start(); rS('frame').start();
glS.start(); glS.start();
@ -124,24 +142,24 @@ export default class Main {
rS('render').start(); rS('render').start();
} }
// Clear renderer // Clear renderer and re-render
this.renderer.threeRenderer.clear(); this.renderer.threeRenderer.clear();
this.renderer.render(this.scene, this.camera.threeCamera); this.renderer.render(this.scene, this.camera.threeCamera);
if(Config.isDev) { if(Config.isDev) {
rS('render').end(); rS('render').end(); // render finished
rS('frame').end(); rS('frame').end(); // frame finished
rS('rStats').start(); rS('rStats').start();
rS().update(); rS().update();
rS('rStats').end(); rS('rStats').end();
} }
// Updates // Updates section
TWEEN.update(); TWEEN.update();
this.controls.threeControls.update(); this.controls.threeControls.update();
// raf // RAF
requestAnimationFrame(this.render.bind(this)); requestAnimationFrame(this.render.bind(this)); // Bind the main class instead of window object
} }
} }