Fixed Three.js import, updated file imports, commented code
This commit is contained in:
parent
93156a8174
commit
9bc1583877
|
@ -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
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue