From 93156a817439e34788a6dfe9cb356d85fc6c78da Mon Sep 17 00:00:00 2001 From: Paul Graffam Date: Thu, 6 Oct 2016 23:14:07 -0400 Subject: [PATCH] Refactored app js into folders, fixed three.js import for new version, minor changes after lint pass --- src/js/app/{ => components}/camera.js | 6 +- src/js/app/{ => components}/controls.js | 6 +- src/js/app/{ => components}/light.js | 4 +- src/js/app/{ => components}/renderer.js | 8 +- src/js/app/{ => helpers}/animation.js | 2 +- src/js/app/{ => helpers}/geometry.js | 6 +- src/js/app/{ => helpers}/helper.js | 10 +- src/js/app/{ => helpers}/material.js | 4 +- src/js/app/{gui.js => managers/datGUI.js} | 122 +++++++++++----------- src/js/app/{ => managers}/interaction.js | 34 +++--- src/js/app/{ => model}/model.js | 16 +-- src/js/app/{ => model}/texture.js | 8 +- 12 files changed, 114 insertions(+), 112 deletions(-) rename src/js/app/{ => components}/camera.js (76%) rename src/js/app/{ => components}/controls.js (89%) rename src/js/app/{ => components}/light.js (97%) rename src/js/app/{ => components}/renderer.js (91%) rename src/js/app/{ => helpers}/animation.js (91%) rename src/js/app/{ => helpers}/geometry.js (89%) rename src/js/app/{ => helpers}/helper.js (65%) rename src/js/app/{ => helpers}/material.js (85%) rename src/js/app/{gui.js => managers/datGUI.js} (68%) rename src/js/app/{ => managers}/interaction.js (71%) rename src/js/app/{ => model}/model.js (79%) rename src/js/app/{ => model}/texture.js (87%) diff --git a/src/js/app/camera.js b/src/js/app/components/camera.js similarity index 76% rename from src/js/app/camera.js rename to src/js/app/components/camera.js index 22c92b1..3754bce 100644 --- a/src/js/app/camera.js +++ b/src/js/app/components/camera.js @@ -1,6 +1,6 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Config from './../data/config'; +import Config from '../../data/config'; export default class Camera { constructor(renderer) { @@ -17,7 +17,7 @@ export default class Camera { } updateSize(renderer) { - this.threeCamera.aspect = (renderer.domElement.width * Config.dpr) / (renderer.domElement.height * Config.dpr); + this.threeCamera.aspect = renderer.domElement.width * Config.dpr / renderer.domElement.height * Config.dpr; this.threeCamera.updateProjectionMatrix(); } } diff --git a/src/js/app/controls.js b/src/js/app/components/controls.js similarity index 89% rename from src/js/app/controls.js rename to src/js/app/components/controls.js index 7eae8a6..c5f0157 100644 --- a/src/js/app/controls.js +++ b/src/js/app/components/controls.js @@ -1,7 +1,7 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import OrbitControls from '../utils/orbitControls'; -import Config from './../data/config'; +import OrbitControls from '../../utils/orbitControls'; +import Config from '../../data/config'; export default class Controls { constructor(camera, container) { diff --git a/src/js/app/light.js b/src/js/app/components/light.js similarity index 97% rename from src/js/app/light.js rename to src/js/app/components/light.js index 0a30458..0d9ec92 100644 --- a/src/js/app/light.js +++ b/src/js/app/components/light.js @@ -1,6 +1,6 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Config from './../data/config'; +import Config from '../../data/config'; export default class Light { constructor(scene) { diff --git a/src/js/app/renderer.js b/src/js/app/components/renderer.js similarity index 91% rename from src/js/app/renderer.js rename to src/js/app/components/renderer.js index 04668ac..85ec761 100644 --- a/src/js/app/renderer.js +++ b/src/js/app/components/renderer.js @@ -1,11 +1,11 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Config from './../data/config'; +import Config from '../../data/config'; export default class Renderer { - constructor(container, scene) { - this.container = container; + constructor(scene, container) { this.scene = scene; + this.container = container; this.threeRenderer = new THREE.WebGLRenderer({antialias: true}); diff --git a/src/js/app/animation.js b/src/js/app/helpers/animation.js similarity index 91% rename from src/js/app/animation.js rename to src/js/app/helpers/animation.js index 8e53373..6d28004 100644 --- a/src/js/app/animation.js +++ b/src/js/app/helpers/animation.js @@ -1,4 +1,4 @@ -import THREE from 'three'; +import * as THREE from 'three'; export default class Animation { constructor(obj, clip) { diff --git a/src/js/app/geometry.js b/src/js/app/helpers/geometry.js similarity index 89% rename from src/js/app/geometry.js rename to src/js/app/helpers/geometry.js index b6a8a14..d31e06f 100644 --- a/src/js/app/geometry.js +++ b/src/js/app/helpers/geometry.js @@ -1,6 +1,6 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Config from '../data/config'; +import Config from '../../data/config'; export default class Geometry { constructor(scene) { @@ -12,7 +12,7 @@ export default class Geometry { if(type == 'plane') { return (width, height, widthSegments = 1, heightSegments = 1) => { this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments); - } + }; } } diff --git a/src/js/app/helper.js b/src/js/app/helpers/helper.js similarity index 65% rename from src/js/app/helper.js rename to src/js/app/helpers/helper.js index eea6f1b..5b6d93f 100644 --- a/src/js/app/helper.js +++ b/src/js/app/helpers/helper.js @@ -1,16 +1,16 @@ -import THREE from 'three'; +import * as THREE from 'three'; export default class Helper { constructor(scene, mesh) { - let wireframe = new THREE.WireframeGeometry(mesh.geometry); - let wireLine = new THREE.LineSegments(wireframe); + const wireframe = new THREE.WireframeGeometry(mesh.geometry); + const wireLine = new THREE.LineSegments(wireframe); wireLine.material.depthTest = false; wireLine.material.opacity = 0.25; wireLine.material.transparent = true; mesh.add(wireLine); - let edges = new THREE.EdgesGeometry(mesh.geometry); - let edgesLine = new THREE.LineSegments(edges); + const edges = new THREE.EdgesGeometry(mesh.geometry); + const edgesLine = new THREE.LineSegments(edges); edgesLine.material.depthTest = false; edgesLine.material.opacity = 0.25; edgesLine.material.transparent = true; diff --git a/src/js/app/material.js b/src/js/app/helpers/material.js similarity index 85% rename from src/js/app/material.js rename to src/js/app/helpers/material.js index f78e6af..c32c7ba 100644 --- a/src/js/app/material.js +++ b/src/js/app/helpers/material.js @@ -1,6 +1,6 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Config from './../data/config'; +import Config from '../../data/config'; export default class Material { constructor() { diff --git a/src/js/app/gui.js b/src/js/app/managers/datGUI.js similarity index 68% rename from src/js/app/gui.js rename to src/js/app/managers/datGUI.js index 8b665c5..2e24f6f 100644 --- a/src/js/app/gui.js +++ b/src/js/app/managers/datGUI.js @@ -1,8 +1,8 @@ -import Config from './../data/config'; +import Config from '../../data/config'; -export default class GUI { +export default class DatGUI { constructor(main, mesh) { - let gui = new dat.GUI(); + const gui = new dat.GUI(); this.camera = main.camera.threeCamera; this.controls = main.controls.threeControls; @@ -12,61 +12,61 @@ export default class GUI { //gui.close(); /* Camera */ - let cameraFolder = gui.addFolder('Camera'); - let cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV'); + const cameraFolder = gui.addFolder('Camera'); + const cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV'); cameraFOVGui.onChange((value) => { this.controls.enableRotate = false; this.camera.fov = value; }); - cameraFOVGui.onFinishChange((value) => { + cameraFOVGui.onFinishChange(() => { this.camera.updateProjectionMatrix(); this.controls.enableRotate = true; }); - let cameraAspectGui = cameraFolder.add(Config.camera, 'aspect', 0, 4).name('Camera Aspect'); + const cameraAspectGui = cameraFolder.add(Config.camera, 'aspect', 0, 4).name('Camera Aspect'); cameraAspectGui.onChange((value) => { this.controls.enableRotate = false; this.camera.aspect = value; }); - cameraAspectGui.onFinishChange((value) => { + cameraAspectGui.onFinishChange(() => { this.camera.updateProjectionMatrix(); this.controls.enableRotate = true; }); - let cameraFogColorGui = cameraFolder.addColor(Config.fog, 'color').name('Fog Color'); + const cameraFogColorGui = cameraFolder.addColor(Config.fog, 'color').name('Fog Color'); cameraFogColorGui.onChange((value) => { main.scene.fog.color.setHex(value); }); - let cameraFogNearGui = cameraFolder.add(Config.fog, 'near', 0.000, 0.010).name('Fog Near'); + const cameraFogNearGui = cameraFolder.add(Config.fog, 'near', 0.000, 0.010).name('Fog Near'); cameraFogNearGui.onChange((value) => { this.controls.enableRotate = false; main.scene.fog.density = value; }); - cameraFogNearGui.onFinishChange((value) => { + cameraFogNearGui.onFinishChange(() => { this.controls.enableRotate = true; }); /* Controls */ - let controlsFolder = gui.addFolder('Controls'); + const controlsFolder = gui.addFolder('Controls'); controlsFolder.add(Config.controls, 'autoRotate').name('Auto Rotate').onChange((value) => { this.controls.autoRotate = value; }); - let controlsAutoRotateSpeedGui = controlsFolder.add(Config.controls, 'autoRotateSpeed', -1, 1).name('Rotation Speed'); + const controlsAutoRotateSpeedGui = controlsFolder.add(Config.controls, 'autoRotateSpeed', -1, 1).name('Rotation Speed'); controlsAutoRotateSpeedGui.onChange((value) => { this.controls.enableRotate = false; this.controls.autoRotateSpeed = value; }); - controlsAutoRotateSpeedGui.onFinishChange((value) => { + controlsAutoRotateSpeedGui.onFinishChange(() => { this.controls.enableRotate = true; }); /* Mesh */ - let meshFolder = gui.addFolder('Mesh'); + const meshFolder = gui.addFolder('Mesh'); meshFolder.add(Config.mesh, 'translucent', true).name('Translucent').onChange((value) => { if(value) { mesh.material.transparent = true; @@ -82,7 +82,7 @@ export default class GUI { /* Lights */ // Ambient Light - let ambientLightFolder = gui.addFolder('Ambient Light'); + const ambientLightFolder = gui.addFolder('Ambient Light'); ambientLightFolder.add(Config.ambientLight, 'enabled').name('Enabled').onChange((value) => { this.light.ambientLight.visible = value; }); @@ -92,137 +92,137 @@ export default class GUI { // Directional Light - let directionalLightFolder = gui.addFolder('Directional Light'); + const directionalLightFolder = gui.addFolder('Directional Light'); directionalLightFolder.add(Config.directionalLight, 'enabled').name('Enabled').onChange((value) => { this.light.directionalLight.visible = value; }); directionalLightFolder.addColor(Config.directionalLight, 'color').name('Color').onChange((value) => { this.light.directionalLight.color.setHex(value); }); - let directionalLightIntensityGui = directionalLightFolder.add(Config.directionalLight, 'intensity', 0, 2).name('Intensity'); + const directionalLightIntensityGui = directionalLightFolder.add(Config.directionalLight, 'intensity', 0, 2).name('Intensity'); directionalLightIntensityGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.intensity = value; }); - directionalLightIntensityGui.onFinishChange((value) => { + directionalLightIntensityGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let directionalLightPositionXGui = directionalLightFolder.add(Config.directionalLight, 'x', -1000, 1000).name('Position X'); + const directionalLightPositionXGui = directionalLightFolder.add(Config.directionalLight, 'x', -1000, 1000).name('Position X'); directionalLightPositionXGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.position.x = value; }); - directionalLightPositionXGui.onFinishChange((value) => { + directionalLightPositionXGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let directionalLightPositionYGui = directionalLightFolder.add(Config.directionalLight, 'y', -1000, 1000).name('Position Y'); + const directionalLightPositionYGui = directionalLightFolder.add(Config.directionalLight, 'y', -1000, 1000).name('Position Y'); directionalLightPositionYGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.position.y = value; }); - directionalLightPositionYGui.onFinishChange((value) => { + directionalLightPositionYGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let directionalLightPositionZGui = directionalLightFolder.add(Config.directionalLight, 'z', -1000, 1000).name('Position Z'); + const directionalLightPositionZGui = directionalLightFolder.add(Config.directionalLight, 'z', -1000, 1000).name('Position Z'); directionalLightPositionZGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.position.z = value; }); - directionalLightPositionZGui.onFinishChange((value) => { + directionalLightPositionZGui.onFinishChange(() => { this.controls.enableRotate = true; }); // Shadow Map - let shadowFolder = gui.addFolder('Shadow Map'); + const shadowFolder = gui.addFolder('Shadow Map'); shadowFolder.add(Config.shadow, 'enabled').name('Enabled').onChange((value) => { this.light.directionalLight.castShadow = value; }); shadowFolder.add(Config.shadow, 'helperEnabled').name('Helper Enabled').onChange((value) => { this.light.directionalLightHelper.visible = value; }); - let shadowNearGui = shadowFolder.add(Config.shadow, 'near', 0, 100).name('Near'); + const shadowNearGui = shadowFolder.add(Config.shadow, 'near', 0, 100).name('Near'); shadowNearGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.near = value; }); - shadowNearGui.onFinishChange((value) => { + shadowNearGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowFarGui = shadowFolder.add(Config.shadow, 'far', 0, 1200).name('Far'); + const shadowFarGui = shadowFolder.add(Config.shadow, 'far', 0, 1200).name('Far'); shadowFarGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.far = value; }); - shadowFarGui.onFinishChange((value) => { + shadowFarGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowTopGui = shadowFolder.add(Config.shadow, 'top', -400, 400).name('Top'); + const shadowTopGui = shadowFolder.add(Config.shadow, 'top', -400, 400).name('Top'); shadowTopGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.top = value; }); - shadowTopGui.onFinishChange((value) => { + shadowTopGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowRightGui = shadowFolder.add(Config.shadow, 'right', -400, 400).name('Right'); + const shadowRightGui = shadowFolder.add(Config.shadow, 'right', -400, 400).name('Right'); shadowRightGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.right = value; }); - shadowRightGui.onFinishChange((value) => { + shadowRightGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowBottomGui = shadowFolder.add(Config.shadow, 'bottom', -400, 400).name('Bottom'); + const shadowBottomGui = shadowFolder.add(Config.shadow, 'bottom', -400, 400).name('Bottom'); shadowBottomGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.bottom = value; }); - shadowBottomGui.onFinishChange((value) => { + shadowBottomGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowLeftGui = shadowFolder.add(Config.shadow, 'left', -400, 400).name('Left'); + const shadowLeftGui = shadowFolder.add(Config.shadow, 'left', -400, 400).name('Left'); shadowLeftGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.camera.left = value; }); - shadowLeftGui.onFinishChange((value) => { + shadowLeftGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; this.light.directionalLightHelper.update(); }); - let shadowBiasGui = shadowFolder.add(Config.shadow, 'bias', -0.000010, 1).name('Bias'); + const shadowBiasGui = shadowFolder.add(Config.shadow, 'bias', -0.000010, 1).name('Bias'); shadowBiasGui.onChange((value) => { this.controls.enableRotate = false; this.light.directionalLight.shadow.bias = value; }); - shadowBiasGui.onFinishChange((value) => { + shadowBiasGui.onFinishChange(() => { this.controls.enableRotate = true; this.light.directionalLight.shadow.map.dispose(); this.light.directionalLight.shadow.map = null; @@ -231,62 +231,62 @@ export default class GUI { // Point Light - let pointLightFolder = gui.addFolder('Point Light'); + const pointLightFolder = gui.addFolder('Point Light'); pointLightFolder.add(Config.pointLight, 'enabled').name('Enabled').onChange((value) => { this.light.pointLight.visible = value; }); pointLightFolder.addColor(Config.pointLight, 'color').name('Color').onChange((value) => { this.light.pointLight.color.setHex(value); }); - let pointLightIntensityGui = pointLightFolder.add(Config.pointLight, 'intensity', 0, 2).name('Intensity'); + const pointLightIntensityGui = pointLightFolder.add(Config.pointLight, 'intensity', 0, 2).name('Intensity'); pointLightIntensityGui.onChange((value) => { this.controls.enableRotate = false; this.light.pointLight.intensity = value; }); - pointLightIntensityGui.onFinishChange((value) => { + pointLightIntensityGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let pointLightDistanceGui = pointLightFolder.add(Config.pointLight, 'distance', 0, 1000).name('Distance'); + const pointLightDistanceGui = pointLightFolder.add(Config.pointLight, 'distance', 0, 1000).name('Distance'); pointLightDistanceGui.onChange((value) => { this.controls.enableRotate = false; this.light.pointLight.distance = value; }); - pointLightDistanceGui.onFinishChange((value) => { + pointLightDistanceGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let pointLightPositionXGui = pointLightFolder.add(Config.pointLight, 'x', -1000, 1000).name('Position X'); + const pointLightPositionXGui = pointLightFolder.add(Config.pointLight, 'x', -1000, 1000).name('Position X'); pointLightPositionXGui.onChange((value) => { this.controls.enableRotate = false; this.light.pointLight.position.x = value; }); - pointLightPositionXGui.onFinishChange((value) => { + pointLightPositionXGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let pointLightPositionYGui = pointLightFolder.add(Config.pointLight, 'y', -1000, 1000).name('Position Y'); + const pointLightPositionYGui = pointLightFolder.add(Config.pointLight, 'y', -1000, 1000).name('Position Y'); pointLightPositionYGui.onChange((value) => { this.controls.enableRotate = false; this.light.pointLight.position.y = value; }); - pointLightPositionYGui.onFinishChange((value) => { + pointLightPositionYGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let pointLightPositionZGui = pointLightFolder.add(Config.pointLight, 'z', -1000, 1000).name('Position Z'); + const pointLightPositionZGui = pointLightFolder.add(Config.pointLight, 'z', -1000, 1000).name('Position Z'); pointLightPositionZGui.onChange((value) => { this.controls.enableRotate = false; this.light.pointLight.position.z = value; }); - pointLightPositionZGui.onFinishChange((value) => { + pointLightPositionZGui.onFinishChange(() => { this.controls.enableRotate = true; }); // Hemi Light - let hemiLightFolder = gui.addFolder('Hemi Light'); + const hemiLightFolder = gui.addFolder('Hemi Light'); hemiLightFolder.add(Config.hemiLight, 'enabled').name('Enabled').onChange((value) => { this.light.hemiLight.visible = value; }); @@ -296,40 +296,40 @@ export default class GUI { hemiLightFolder.addColor(Config.hemiLight, 'groundColor').name('ground Color').onChange((value) => { this.light.hemiLight.groundColor.setHex(value); }); - let hemiLightIntensityGui = hemiLightFolder.add(Config.hemiLight, 'intensity', 0, 2).name('Intensity'); + const hemiLightIntensityGui = hemiLightFolder.add(Config.hemiLight, 'intensity', 0, 2).name('Intensity'); hemiLightIntensityGui.onChange((value) => { this.controls.enableRotate = false; this.light.hemiLight.intensity = value; }); - hemiLightIntensityGui.onFinishChange((value) => { + hemiLightIntensityGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let hemiLightPositionXGui = hemiLightFolder.add(Config.hemiLight, 'x', -1000, 1000).name('Position X'); + const hemiLightPositionXGui = hemiLightFolder.add(Config.hemiLight, 'x', -1000, 1000).name('Position X'); hemiLightPositionXGui.onChange((value) => { this.controls.enableRotate = false; this.light.hemiLight.position.x = value; }); - hemiLightPositionXGui.onFinishChange((value) => { + hemiLightPositionXGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let hemiLightPositionYGui = hemiLightFolder.add(Config.hemiLight, 'y', -500, 1000).name('Position Y'); + const hemiLightPositionYGui = hemiLightFolder.add(Config.hemiLight, 'y', -500, 1000).name('Position Y'); hemiLightPositionYGui.onChange((value) => { this.controls.enableRotate = false; this.light.hemiLight.position.y = value; }); - hemiLightPositionYGui.onFinishChange((value) => { + hemiLightPositionYGui.onFinishChange(() => { this.controls.enableRotate = true; }); - let hemiLightPositionZGui = hemiLightFolder.add(Config.hemiLight, 'z', -1000, 1000).name('Position Z'); + const hemiLightPositionZGui = hemiLightFolder.add(Config.hemiLight, 'z', -1000, 1000).name('Position Z'); hemiLightPositionZGui.onChange((value) => { this.controls.enableRotate = false; this.light.hemiLight.position.z = value; }); - hemiLightPositionZGui.onFinishChange((value) => { + hemiLightPositionZGui.onFinishChange(() => { this.controls.enableRotate = true; }); } @@ -363,7 +363,7 @@ export default class GUI { }; } - update() { + update(mesh) { this.needsUpdate(mesh.material, mesh.geometry); } } diff --git a/src/js/app/interaction.js b/src/js/app/managers/interaction.js similarity index 71% rename from src/js/app/interaction.js rename to src/js/app/managers/interaction.js index 7e2463b..2599620 100644 --- a/src/js/app/interaction.js +++ b/src/js/app/managers/interaction.js @@ -1,54 +1,56 @@ -import THREE from 'three'; - -import Keyboard from './../utils/keyboard'; -import Helpers from './../utils/helpers'; -import Config from './../data/config'; +import Keyboard from '../../utils/keyboard'; +import Helpers from '../../utils/helpers'; +import Config from '../../data/config'; export default class Interaction { constructor(renderer, scene, camera, controls) { + // Properties this.renderer = renderer; this.scene = scene; this.camera = camera; this.controls = controls; + // Instantiate keyboard helper this.keyboard = new Keyboard(); - // listeners - // mouse events + // Listeners + // Mouse events this.renderer.domElement.addEventListener('mouseup', (event) => this.onMouseUp(event), false); this.renderer.domElement.addEventListener('mousemove', (event) => Helpers.throttle(this.onMouseMove(event), 250), false); - this.renderer.domElement.addEventListener('mouseenter', (event) => this.onMouseEnter(event), false); this.renderer.domElement.addEventListener('mouseleave', (event) => this.onMouseLeave(event), false); this.renderer.domElement.addEventListener('mouseover', (event) => this.onMouseOver(event), false); - // keyboard events + // Keyboard events this.keyboard.domElement.addEventListener('keydown', (event) => { if(event.repeat) { return; } + if(this.keyboard.eventMatches(event, 'escape')) { console.log('Escape pressed'); } }); } - onMouseEnter(event) { - event.preventDefault(); - } - onMouseOver(event) { event.preventDefault(); + + Config.isMouseOver = true; } onMouseLeave(event) { event.preventDefault(); + + Config.isMouseOver = false; } onMouseMove(event) { event.preventDefault(); - } - onMouseUp(event) { - event.preventDefault(); + setTimeout(function() { + Config.isMouseMoving = false; + }, 200); + + Config.isMouseMoving = true; } } diff --git a/src/js/app/model.js b/src/js/app/model/model.js similarity index 79% rename from src/js/app/model.js rename to src/js/app/model/model.js index 16b2e6d..6b76418 100644 --- a/src/js/app/model.js +++ b/src/js/app/model/model.js @@ -1,8 +1,8 @@ -import THREE from 'three'; +import * as THREE from 'three'; -import Material from './material'; -import Helper from './helper'; -import Config from './../data/config'; +import Material from '../helpers/material'; +import Helper from '../helpers/helper'; +import Config from '../../data/config'; export default class Model { constructor(scene, manager, textures) { @@ -18,7 +18,7 @@ export default class Model { this.loader.load(Config.model.path, (obj) => { obj.traverse((child) => { if(child instanceof THREE.Mesh) { - let material = new Material().standard; + const material = new Material().standard; material.map = this.textures.UV; child.material = material; @@ -45,13 +45,13 @@ export default class Model { static onProgress(xhr) { if(xhr.lengthComputable) { - let percentComplete = xhr.loaded / xhr.total * 100; + const percentComplete = xhr.loaded / xhr.total * 100; console.log(Math.round(percentComplete, 2) + '% downloaded'); } - }; + } static onError(xhr) { console.error(xhr); - }; + } } diff --git a/src/js/app/texture.js b/src/js/app/model/texture.js similarity index 87% rename from src/js/app/texture.js rename to src/js/app/model/texture.js index 2eb31fa..ea35a12 100644 --- a/src/js/app/texture.js +++ b/src/js/app/model/texture.js @@ -1,7 +1,7 @@ -import THREE from 'three'; +import * as THREE from 'three'; import { Promise } from 'es6-promise'; -import Config from './../data/config'; +import Config from '../../data/config'; export default class Texture { constructor() { @@ -13,7 +13,7 @@ export default class Texture { const maxAnisotropy = Config.maxAnisotropy; const imageFiles = Config.texture.imageFiles; - let promiseArray = []; + const promiseArray = []; loader.setPath(Config.texture.path); @@ -30,7 +30,7 @@ export default class Texture { resolve(modelOBJ); }, function(xhr) { - console.log(( xhr.loaded / xhr.total * 100 ) + '% loaded'); + console.log(xhr.loaded / xhr.total * 100 + '% loaded'); }, function(xhr) { reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));