From ee7369d79b14d909874dc311f0778c55d628b2f3 Mon Sep 17 00:00:00 2001 From: Paul Graffam Date: Fri, 7 Oct 2016 14:55:31 -0400 Subject: [PATCH] Added more comments --- src/js/app/components/camera.js | 5 +++++ src/js/app/components/controls.js | 1 + src/js/app/components/light.js | 13 +++++++------ src/js/app/components/renderer.js | 4 +++- src/js/app/helpers/animation.js | 4 ++++ src/js/app/helpers/meshHelper.js | 1 + src/js/app/managers/interaction.js | 1 + src/js/app/model/texture.js | 8 ++++---- src/js/data/config.js | 2 +- 9 files changed, 27 insertions(+), 12 deletions(-) diff --git a/src/js/app/components/camera.js b/src/js/app/components/camera.js index 3fa9228..8ed343b 100644 --- a/src/js/app/components/camera.js +++ b/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(); } } diff --git a/src/js/app/components/controls.js b/src/js/app/components/controls.js index f81a453..8a673ef 100644 --- a/src/js/app/components/controls.js +++ b/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 diff --git a/src/js/app/components/light.js b/src/js/app/components/light.js index 0d9ec92..237b65a 100644 --- a/src/js/app/components/light.js +++ b/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; diff --git a/src/js/app/components/renderer.js b/src/js/app/components/renderer.js index 3f70d7b..bd4e666 100644 --- a/src/js/app/components/renderer.js +++ b/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 diff --git a/src/js/app/helpers/animation.js b/src/js/app/helpers/animation.js index 6d28004..d63da76 100644 --- a/src/js/app/helpers/animation.js +++ b/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); diff --git a/src/js/app/helpers/meshHelper.js b/src/js/app/helpers/meshHelper.js index 5919c29..cdb2b3c 100644 --- a/src/js/app/helpers/meshHelper.js +++ b/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); diff --git a/src/js/app/managers/interaction.js b/src/js/app/managers/interaction.js index e94886c..957e0bb 100644 --- a/src/js/app/managers/interaction.js +++ b/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 diff --git a/src/js/app/model/texture.js b/src/js/app/model/texture.js index 59fafbe..35df5eb 100644 --- a/src/js/app/model/texture.js +++ b/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); diff --git a/src/js/data/config.js b/src/js/data/config.js index d5c081f..52ff5f2 100644 --- a/src/js/data/config.js +++ b/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,