Added more comments

src/js/app/components/camera.js

@@ -2,14 +2,17 @@ import * as THREE from 'three';
 
 import Config from '../../data/config';
 
+// Class that creates and updates the main camera
 export default class Camera {
   constructor(renderer) {
     const width = renderer.domElement.width;
     const height = renderer.domElement.height;
 
+    // Create and position a Perspective Camera
     this.threeCamera = new THREE.PerspectiveCamera(Config.camera.fov, width / height, Config.camera.near, Config.camera.far);
     this.threeCamera.position.set(Config.camera.posX, Config.camera.posY, Config.camera.posZ);
 
+    // Initial sizing
     this.updateSize(renderer);
     
     // Listeners
@@ -19,6 +22,8 @@ export default class Camera {
   updateSize(renderer) {
     // Multiply by dpr in case it is retina device
     this.threeCamera.aspect = renderer.domElement.width * Config.dpr / renderer.domElement.height * Config.dpr;
+
+    // Always call updateProjectionMatrix on camera change
     this.threeCamera.updateProjectionMatrix();
   }
 }

src/js/app/components/controls.js

@@ -3,6 +3,7 @@ import * as THREE from 'three';
 import OrbitControls from '../../utils/orbitControls';
 import Config from '../../data/config';
 
+// Controls based on orbit controls
 export default class Controls {
   constructor(camera, container) {
     // Orbit controls first needs to pass in THREE to constructor

src/js/app/components/light.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 
 import Config from '../../data/config';
 
+// Sets up and places all lights in scene
 export default class Light {
   constructor(scene) {
     this.scene = scene;
@@ -10,21 +11,21 @@ export default class Light {
   }
 
   init() {
-    // ambient
+    // Ambient
     this.ambientLight = new THREE.AmbientLight(Config.ambientLight.color);
     this.ambientLight.visible = Config.ambientLight.enabled;
 
-    // point light
+    // Point light
     this.pointLight = new THREE.PointLight(Config.pointLight.color, Config.pointLight.intensity, Config.pointLight.distance);
     this.pointLight.position.set(Config.pointLight.x, Config.pointLight.y, Config.pointLight.z);
     this.pointLight.visible = Config.pointLight.enabled;
 
-    // directional light
+    // Directional light
     this.directionalLight = new THREE.DirectionalLight(Config.directionalLight.color, Config.directionalLight.intensity);
     this.directionalLight.position.set(Config.directionalLight.x, Config.directionalLight.y, Config.directionalLight.z);
     this.directionalLight.visible = Config.directionalLight.enabled;
 
-    // shadow map
+    // Shadow map
     this.directionalLight.castShadow = Config.shadow.enabled;
     this.directionalLight.shadow.bias = Config.shadow.bias;
     this.directionalLight.shadow.camera.near = Config.shadow.near;
@@ -36,11 +37,11 @@ export default class Light {
     this.directionalLight.shadow.mapSize.width = Config.shadow.mapWidth;
     this.directionalLight.shadow.mapSize.height = Config.shadow.mapHeight;
 
-    // shadow camera helper
+    // Shadow camera helper
     this.directionalLightHelper = new THREE.CameraHelper(this.directionalLight.shadow.camera);
     this.directionalLightHelper.visible = Config.shadow.helperEnabled;
 
-    // hemisphere light
+    // Hemisphere light
     this.hemiLight = new THREE.HemisphereLight(Config.hemiLight.color, Config.hemiLight.groundColor, Config.hemiLight.intensity);
     this.hemiLight.position.set(Config.hemiLight.x, Config.hemiLight.y, Config.hemiLight.z);
     this.hemiLight.visible = Config.hemiLight.enabled;

src/js/app/components/renderer.js

@@ -2,6 +2,7 @@ import * as THREE from 'three';
 
 import Config from '../../data/config';
 
+// Main webGL renderer class
 export default class Renderer {
   constructor(scene, container) {
     // Properties
@@ -11,10 +12,11 @@ export default class Renderer {
     // Create WebGL renderer and set its antialias
     this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
 
-    // Set clear color to fog to enable fog or to color
+    // Set clear color to fog to enable fog or to hex color for no fog
     this.threeRenderer.setClearColor(scene.fog.color);
     this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina
 
+    // Appends canvas
     container.appendChild(this.threeRenderer.domElement);
 
     // Shadow map options

src/js/app/helpers/animation.js

@@ -2,10 +2,13 @@ import * as THREE from 'three';
 
 export default class Animation {
   constructor(obj, clip) {
+    // Object with animations
     this.obj = obj;
 
+    // Initialize animation mixer
     this.mixer = new THREE.AnimationMixer(this.obj);
 
+    // Simple animation player
     this.playClip(clip);
   }
 
@@ -15,6 +18,7 @@ export default class Animation {
     this.action.play();
   }
 
+  // Call update in loop
   update(delta) {
     if(this.mixer) {
       this.mixer.update(delta);

src/js/app/helpers/meshHelper.js

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
 
+// Simple mesh helper that shows edges, wireframes, and face and vertex normals
 export default class MeshHelper {
   constructor(scene, mesh) {
     const wireframe = new THREE.WireframeGeometry(mesh.geometry);

src/js/app/managers/interaction.js

@@ -2,6 +2,7 @@ import Keyboard from '../../utils/keyboard';
 import Helpers from '../../utils/helpers';
 import Config from '../../data/config';
 
+// Manages all input interactions
 export default class Interaction {
   constructor(renderer, scene, camera, controls) {
     // Properties

src/js/app/model/texture.js

@@ -5,12 +5,13 @@ 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
+// This class preloads all textures in the imageFiles array in the Config via ES6 Promises.
+// Once all textures are done loading the model itself will be loaded after the Promise .then() callback.
+// Using promises to preload textures prevents issues when applying textures to materials
 // before the textures have loaded.
 export default class Texture {
   constructor() {
+    // Prop that will contain all loaded textures
     this.textures = {};
   }
 
@@ -18,7 +19,6 @@ export default class Texture {
     const loader = new THREE.TextureLoader();
     const maxAnisotropy = Config.maxAnisotropy;
     const imageFiles = Config.texture.imageFiles;
-
     const promiseArray = [];
 
     loader.setPath(Config.texture.path);

src/js/data/config.js

@@ -1,6 +1,6 @@
 import TWEEN from 'tween.js';
 
-// This object contains most of the configurable options and state of the app
+// This object contains the state of the app
 export default {
   isDev: false,
   isLoaded: false,