Added more comments
This commit is contained in:
parent
c2f4f1741b
commit
ee7369d79b
|
@ -2,14 +2,17 @@ import * as THREE from 'three';
|
||||||
|
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Class that creates and updates the main camera
|
||||||
export default class Camera {
|
export default class Camera {
|
||||||
constructor(renderer) {
|
constructor(renderer) {
|
||||||
const width = renderer.domElement.width;
|
const width = renderer.domElement.width;
|
||||||
const height = renderer.domElement.height;
|
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 = 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);
|
this.threeCamera.position.set(Config.camera.posX, Config.camera.posY, Config.camera.posZ);
|
||||||
|
|
||||||
|
// Initial sizing
|
||||||
this.updateSize(renderer);
|
this.updateSize(renderer);
|
||||||
|
|
||||||
// Listeners
|
// Listeners
|
||||||
|
@ -19,6 +22,8 @@ export default class Camera {
|
||||||
updateSize(renderer) {
|
updateSize(renderer) {
|
||||||
// Multiply by dpr in case it is retina device
|
// Multiply by dpr in case it is retina device
|
||||||
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;
|
||||||
|
|
||||||
|
// Always call updateProjectionMatrix on camera change
|
||||||
this.threeCamera.updateProjectionMatrix();
|
this.threeCamera.updateProjectionMatrix();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -3,6 +3,7 @@ import * as THREE from 'three';
|
||||||
import OrbitControls from '../../utils/orbitControls';
|
import OrbitControls from '../../utils/orbitControls';
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Controls based on orbit controls
|
||||||
export default class Controls {
|
export default class Controls {
|
||||||
constructor(camera, container) {
|
constructor(camera, container) {
|
||||||
// Orbit controls first needs to pass in THREE to constructor
|
// Orbit controls first needs to pass in THREE to constructor
|
||||||
|
|
|
@ -2,6 +2,7 @@ import * as THREE from 'three';
|
||||||
|
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Sets up and places all lights in scene
|
||||||
export default class Light {
|
export default class Light {
|
||||||
constructor(scene) {
|
constructor(scene) {
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
@ -10,21 +11,21 @@ export default class Light {
|
||||||
}
|
}
|
||||||
|
|
||||||
init() {
|
init() {
|
||||||
// ambient
|
// Ambient
|
||||||
this.ambientLight = new THREE.AmbientLight(Config.ambientLight.color);
|
this.ambientLight = new THREE.AmbientLight(Config.ambientLight.color);
|
||||||
this.ambientLight.visible = Config.ambientLight.enabled;
|
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 = 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.position.set(Config.pointLight.x, Config.pointLight.y, Config.pointLight.z);
|
||||||
this.pointLight.visible = Config.pointLight.enabled;
|
this.pointLight.visible = Config.pointLight.enabled;
|
||||||
|
|
||||||
// directional light
|
// Directional light
|
||||||
this.directionalLight = new THREE.DirectionalLight(Config.directionalLight.color, Config.directionalLight.intensity);
|
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.position.set(Config.directionalLight.x, Config.directionalLight.y, Config.directionalLight.z);
|
||||||
this.directionalLight.visible = Config.directionalLight.enabled;
|
this.directionalLight.visible = Config.directionalLight.enabled;
|
||||||
|
|
||||||
// shadow map
|
// Shadow map
|
||||||
this.directionalLight.castShadow = Config.shadow.enabled;
|
this.directionalLight.castShadow = Config.shadow.enabled;
|
||||||
this.directionalLight.shadow.bias = Config.shadow.bias;
|
this.directionalLight.shadow.bias = Config.shadow.bias;
|
||||||
this.directionalLight.shadow.camera.near = Config.shadow.near;
|
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.width = Config.shadow.mapWidth;
|
||||||
this.directionalLight.shadow.mapSize.height = Config.shadow.mapHeight;
|
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 = new THREE.CameraHelper(this.directionalLight.shadow.camera);
|
||||||
this.directionalLightHelper.visible = Config.shadow.helperEnabled;
|
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 = 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.position.set(Config.hemiLight.x, Config.hemiLight.y, Config.hemiLight.z);
|
||||||
this.hemiLight.visible = Config.hemiLight.enabled;
|
this.hemiLight.visible = Config.hemiLight.enabled;
|
||||||
|
|
|
@ -2,6 +2,7 @@ import * as THREE from 'three';
|
||||||
|
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Main webGL renderer class
|
||||||
export default class Renderer {
|
export default class Renderer {
|
||||||
constructor(scene, container) {
|
constructor(scene, container) {
|
||||||
// Properties
|
// Properties
|
||||||
|
@ -11,10 +12,11 @@ export default class Renderer {
|
||||||
// Create WebGL renderer and set its antialias
|
// Create WebGL renderer and set its antialias
|
||||||
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
|
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.setClearColor(scene.fog.color);
|
||||||
this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina
|
this.threeRenderer.setPixelRatio(window.devicePixelRatio); // For retina
|
||||||
|
|
||||||
|
// Appends canvas
|
||||||
container.appendChild(this.threeRenderer.domElement);
|
container.appendChild(this.threeRenderer.domElement);
|
||||||
|
|
||||||
// Shadow map options
|
// Shadow map options
|
||||||
|
|
|
@ -2,10 +2,13 @@ import * as THREE from 'three';
|
||||||
|
|
||||||
export default class Animation {
|
export default class Animation {
|
||||||
constructor(obj, clip) {
|
constructor(obj, clip) {
|
||||||
|
// Object with animations
|
||||||
this.obj = obj;
|
this.obj = obj;
|
||||||
|
|
||||||
|
// Initialize animation mixer
|
||||||
this.mixer = new THREE.AnimationMixer(this.obj);
|
this.mixer = new THREE.AnimationMixer(this.obj);
|
||||||
|
|
||||||
|
// Simple animation player
|
||||||
this.playClip(clip);
|
this.playClip(clip);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -15,6 +18,7 @@ export default class Animation {
|
||||||
this.action.play();
|
this.action.play();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Call update in loop
|
||||||
update(delta) {
|
update(delta) {
|
||||||
if(this.mixer) {
|
if(this.mixer) {
|
||||||
this.mixer.update(delta);
|
this.mixer.update(delta);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import * as THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
|
// Simple mesh helper that shows edges, wireframes, and face and vertex normals
|
||||||
export default class MeshHelper {
|
export default class MeshHelper {
|
||||||
constructor(scene, mesh) {
|
constructor(scene, mesh) {
|
||||||
const wireframe = new THREE.WireframeGeometry(mesh.geometry);
|
const wireframe = new THREE.WireframeGeometry(mesh.geometry);
|
||||||
|
|
|
@ -2,6 +2,7 @@ import Keyboard from '../../utils/keyboard';
|
||||||
import Helpers from '../../utils/helpers';
|
import Helpers from '../../utils/helpers';
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
|
// Manages all input interactions
|
||||||
export default class Interaction {
|
export default class Interaction {
|
||||||
constructor(renderer, scene, camera, controls) {
|
constructor(renderer, scene, camera, controls) {
|
||||||
// Properties
|
// Properties
|
||||||
|
|
|
@ -5,12 +5,13 @@ import { Promise } from 'es6-promise';
|
||||||
import Helpers from '../../utils/helpers';
|
import Helpers from '../../utils/helpers';
|
||||||
import Config from '../../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
// This class preloads all textures in the imageFiles array in Config via ES6 Promises.
|
// 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 with the Promise .then() callback.
|
// Once all textures are done loading the model itself will be loaded after the Promise .then() callback.
|
||||||
// Using promises to preload textures prevents issues of loading and applying textures to materials
|
// Using promises to preload textures prevents issues when applying textures to materials
|
||||||
// before the textures have loaded.
|
// before the textures have loaded.
|
||||||
export default class Texture {
|
export default class Texture {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
// Prop that will contain all loaded textures
|
||||||
this.textures = {};
|
this.textures = {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -18,7 +19,6 @@ export default class Texture {
|
||||||
const loader = new THREE.TextureLoader();
|
const loader = new THREE.TextureLoader();
|
||||||
const maxAnisotropy = Config.maxAnisotropy;
|
const maxAnisotropy = Config.maxAnisotropy;
|
||||||
const imageFiles = Config.texture.imageFiles;
|
const imageFiles = Config.texture.imageFiles;
|
||||||
|
|
||||||
const promiseArray = [];
|
const promiseArray = [];
|
||||||
|
|
||||||
loader.setPath(Config.texture.path);
|
loader.setPath(Config.texture.path);
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
import TWEEN from 'tween.js';
|
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 {
|
export default {
|
||||||
isDev: false,
|
isDev: false,
|
||||||
isLoaded: false,
|
isLoaded: false,
|
||||||
|
|
Loading…
Reference in New Issue