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';
|
||||
|
||||
// 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();
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue