Refactored app js into folders, fixed three.js import for new version, minor changes after lint pass
This commit is contained in:
parent
2fba979793
commit
93156a8174
|
@ -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 {
|
export default class Camera {
|
||||||
constructor(renderer) {
|
constructor(renderer) {
|
||||||
|
@ -17,7 +17,7 @@ export default class Camera {
|
||||||
}
|
}
|
||||||
|
|
||||||
updateSize(renderer) {
|
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();
|
this.threeCamera.updateProjectionMatrix();
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import THREE from 'three';
|
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';
|
||||||
|
|
||||||
export default class Controls {
|
export default class Controls {
|
||||||
constructor(camera, container) {
|
constructor(camera, container) {
|
|
@ -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 {
|
export default class Light {
|
||||||
constructor(scene) {
|
constructor(scene) {
|
|
@ -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 {
|
export default class Renderer {
|
||||||
constructor(container, scene) {
|
constructor(scene, container) {
|
||||||
this.container = container;
|
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
|
this.container = container;
|
||||||
|
|
||||||
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
|
this.threeRenderer = new THREE.WebGLRenderer({antialias: true});
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
export default class Animation {
|
export default class Animation {
|
||||||
constructor(obj, clip) {
|
constructor(obj, clip) {
|
|
@ -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 {
|
export default class Geometry {
|
||||||
constructor(scene) {
|
constructor(scene) {
|
||||||
|
@ -12,7 +12,7 @@ export default class Geometry {
|
||||||
if(type == 'plane') {
|
if(type == 'plane') {
|
||||||
return (width, height, widthSegments = 1, heightSegments = 1) => {
|
return (width, height, widthSegments = 1, heightSegments = 1) => {
|
||||||
this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
|
this.geo = new THREE.PlaneGeometry(width, height, widthSegments, heightSegments);
|
||||||
}
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,16 +1,16 @@
|
||||||
import THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
export default class Helper {
|
export default class Helper {
|
||||||
constructor(scene, mesh) {
|
constructor(scene, mesh) {
|
||||||
let wireframe = new THREE.WireframeGeometry(mesh.geometry);
|
const wireframe = new THREE.WireframeGeometry(mesh.geometry);
|
||||||
let wireLine = new THREE.LineSegments(wireframe);
|
const wireLine = new THREE.LineSegments(wireframe);
|
||||||
wireLine.material.depthTest = false;
|
wireLine.material.depthTest = false;
|
||||||
wireLine.material.opacity = 0.25;
|
wireLine.material.opacity = 0.25;
|
||||||
wireLine.material.transparent = true;
|
wireLine.material.transparent = true;
|
||||||
mesh.add(wireLine);
|
mesh.add(wireLine);
|
||||||
|
|
||||||
let edges = new THREE.EdgesGeometry(mesh.geometry);
|
const edges = new THREE.EdgesGeometry(mesh.geometry);
|
||||||
let edgesLine = new THREE.LineSegments(edges);
|
const edgesLine = new THREE.LineSegments(edges);
|
||||||
edgesLine.material.depthTest = false;
|
edgesLine.material.depthTest = false;
|
||||||
edgesLine.material.opacity = 0.25;
|
edgesLine.material.opacity = 0.25;
|
||||||
edgesLine.material.transparent = true;
|
edgesLine.material.transparent = true;
|
|
@ -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 {
|
export default class Material {
|
||||||
constructor() {
|
constructor() {
|
|
@ -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) {
|
constructor(main, mesh) {
|
||||||
let gui = new dat.GUI();
|
const gui = new dat.GUI();
|
||||||
|
|
||||||
this.camera = main.camera.threeCamera;
|
this.camera = main.camera.threeCamera;
|
||||||
this.controls = main.controls.threeControls;
|
this.controls = main.controls.threeControls;
|
||||||
|
@ -12,61 +12,61 @@ export default class GUI {
|
||||||
//gui.close();
|
//gui.close();
|
||||||
|
|
||||||
/* Camera */
|
/* Camera */
|
||||||
let cameraFolder = gui.addFolder('Camera');
|
const cameraFolder = gui.addFolder('Camera');
|
||||||
let cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV');
|
const cameraFOVGui = cameraFolder.add(Config.camera, 'fov', 0, 180).name('Camera FOV');
|
||||||
cameraFOVGui.onChange((value) => {
|
cameraFOVGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.camera.fov = value;
|
this.camera.fov = value;
|
||||||
});
|
});
|
||||||
cameraFOVGui.onFinishChange((value) => {
|
cameraFOVGui.onFinishChange(() => {
|
||||||
this.camera.updateProjectionMatrix();
|
this.camera.updateProjectionMatrix();
|
||||||
|
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
cameraAspectGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.camera.aspect = value;
|
this.camera.aspect = value;
|
||||||
});
|
});
|
||||||
cameraAspectGui.onFinishChange((value) => {
|
cameraAspectGui.onFinishChange(() => {
|
||||||
this.camera.updateProjectionMatrix();
|
this.camera.updateProjectionMatrix();
|
||||||
|
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
cameraFogColorGui.onChange((value) => {
|
||||||
main.scene.fog.color.setHex(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) => {
|
cameraFogNearGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
main.scene.fog.density = value;
|
main.scene.fog.density = value;
|
||||||
});
|
});
|
||||||
cameraFogNearGui.onFinishChange((value) => {
|
cameraFogNearGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
/* Controls */
|
/* Controls */
|
||||||
let controlsFolder = gui.addFolder('Controls');
|
const controlsFolder = gui.addFolder('Controls');
|
||||||
controlsFolder.add(Config.controls, 'autoRotate').name('Auto Rotate').onChange((value) => {
|
controlsFolder.add(Config.controls, 'autoRotate').name('Auto Rotate').onChange((value) => {
|
||||||
this.controls.autoRotate = 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) => {
|
controlsAutoRotateSpeedGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
this.controls.autoRotateSpeed = value;
|
this.controls.autoRotateSpeed = value;
|
||||||
});
|
});
|
||||||
controlsAutoRotateSpeedGui.onFinishChange((value) => {
|
controlsAutoRotateSpeedGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
/* Mesh */
|
/* Mesh */
|
||||||
let meshFolder = gui.addFolder('Mesh');
|
const meshFolder = gui.addFolder('Mesh');
|
||||||
meshFolder.add(Config.mesh, 'translucent', true).name('Translucent').onChange((value) => {
|
meshFolder.add(Config.mesh, 'translucent', true).name('Translucent').onChange((value) => {
|
||||||
if(value) {
|
if(value) {
|
||||||
mesh.material.transparent = true;
|
mesh.material.transparent = true;
|
||||||
|
@ -82,7 +82,7 @@ export default class GUI {
|
||||||
|
|
||||||
/* Lights */
|
/* Lights */
|
||||||
// Ambient Light
|
// Ambient Light
|
||||||
let ambientLightFolder = gui.addFolder('Ambient Light');
|
const ambientLightFolder = gui.addFolder('Ambient Light');
|
||||||
ambientLightFolder.add(Config.ambientLight, 'enabled').name('Enabled').onChange((value) => {
|
ambientLightFolder.add(Config.ambientLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
this.light.ambientLight.visible = value;
|
this.light.ambientLight.visible = value;
|
||||||
});
|
});
|
||||||
|
@ -92,137 +92,137 @@ export default class GUI {
|
||||||
|
|
||||||
|
|
||||||
// Directional Light
|
// Directional Light
|
||||||
let directionalLightFolder = gui.addFolder('Directional Light');
|
const directionalLightFolder = gui.addFolder('Directional Light');
|
||||||
directionalLightFolder.add(Config.directionalLight, 'enabled').name('Enabled').onChange((value) => {
|
directionalLightFolder.add(Config.directionalLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
this.light.directionalLight.visible = value;
|
this.light.directionalLight.visible = value;
|
||||||
});
|
});
|
||||||
directionalLightFolder.addColor(Config.directionalLight, 'color').name('Color').onChange((value) => {
|
directionalLightFolder.addColor(Config.directionalLight, 'color').name('Color').onChange((value) => {
|
||||||
this.light.directionalLight.color.setHex(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) => {
|
directionalLightIntensityGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.intensity = value;
|
this.light.directionalLight.intensity = value;
|
||||||
});
|
});
|
||||||
directionalLightIntensityGui.onFinishChange((value) => {
|
directionalLightIntensityGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
directionalLightPositionXGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.position.x = value;
|
this.light.directionalLight.position.x = value;
|
||||||
});
|
});
|
||||||
directionalLightPositionXGui.onFinishChange((value) => {
|
directionalLightPositionXGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
directionalLightPositionYGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.position.y = value;
|
this.light.directionalLight.position.y = value;
|
||||||
});
|
});
|
||||||
directionalLightPositionYGui.onFinishChange((value) => {
|
directionalLightPositionYGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
directionalLightPositionZGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.position.z = value;
|
this.light.directionalLight.position.z = value;
|
||||||
});
|
});
|
||||||
directionalLightPositionZGui.onFinishChange((value) => {
|
directionalLightPositionZGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
// Shadow Map
|
// Shadow Map
|
||||||
let shadowFolder = gui.addFolder('Shadow Map');
|
const shadowFolder = gui.addFolder('Shadow Map');
|
||||||
shadowFolder.add(Config.shadow, 'enabled').name('Enabled').onChange((value) => {
|
shadowFolder.add(Config.shadow, 'enabled').name('Enabled').onChange((value) => {
|
||||||
this.light.directionalLight.castShadow = value;
|
this.light.directionalLight.castShadow = value;
|
||||||
});
|
});
|
||||||
shadowFolder.add(Config.shadow, 'helperEnabled').name('Helper Enabled').onChange((value) => {
|
shadowFolder.add(Config.shadow, 'helperEnabled').name('Helper Enabled').onChange((value) => {
|
||||||
this.light.directionalLightHelper.visible = 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) => {
|
shadowNearGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.near = value;
|
this.light.directionalLight.shadow.camera.near = value;
|
||||||
});
|
});
|
||||||
shadowNearGui.onFinishChange((value) => {
|
shadowNearGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowFarGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.far = value;
|
this.light.directionalLight.shadow.camera.far = value;
|
||||||
});
|
});
|
||||||
shadowFarGui.onFinishChange((value) => {
|
shadowFarGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowTopGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.top = value;
|
this.light.directionalLight.shadow.camera.top = value;
|
||||||
});
|
});
|
||||||
shadowTopGui.onFinishChange((value) => {
|
shadowTopGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowRightGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.right = value;
|
this.light.directionalLight.shadow.camera.right = value;
|
||||||
});
|
});
|
||||||
shadowRightGui.onFinishChange((value) => {
|
shadowRightGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowBottomGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.bottom = value;
|
this.light.directionalLight.shadow.camera.bottom = value;
|
||||||
});
|
});
|
||||||
shadowBottomGui.onFinishChange((value) => {
|
shadowBottomGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowLeftGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.camera.left = value;
|
this.light.directionalLight.shadow.camera.left = value;
|
||||||
});
|
});
|
||||||
shadowLeftGui.onFinishChange((value) => {
|
shadowLeftGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
this.light.directionalLightHelper.update();
|
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) => {
|
shadowBiasGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.directionalLight.shadow.bias = value;
|
this.light.directionalLight.shadow.bias = value;
|
||||||
});
|
});
|
||||||
shadowBiasGui.onFinishChange((value) => {
|
shadowBiasGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
this.light.directionalLight.shadow.map.dispose();
|
this.light.directionalLight.shadow.map.dispose();
|
||||||
this.light.directionalLight.shadow.map = null;
|
this.light.directionalLight.shadow.map = null;
|
||||||
|
@ -231,62 +231,62 @@ export default class GUI {
|
||||||
|
|
||||||
|
|
||||||
// Point Light
|
// Point Light
|
||||||
let pointLightFolder = gui.addFolder('Point Light');
|
const pointLightFolder = gui.addFolder('Point Light');
|
||||||
pointLightFolder.add(Config.pointLight, 'enabled').name('Enabled').onChange((value) => {
|
pointLightFolder.add(Config.pointLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
this.light.pointLight.visible = value;
|
this.light.pointLight.visible = value;
|
||||||
});
|
});
|
||||||
pointLightFolder.addColor(Config.pointLight, 'color').name('Color').onChange((value) => {
|
pointLightFolder.addColor(Config.pointLight, 'color').name('Color').onChange((value) => {
|
||||||
this.light.pointLight.color.setHex(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) => {
|
pointLightIntensityGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.pointLight.intensity = value;
|
this.light.pointLight.intensity = value;
|
||||||
});
|
});
|
||||||
pointLightIntensityGui.onFinishChange((value) => {
|
pointLightIntensityGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
pointLightDistanceGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.pointLight.distance = value;
|
this.light.pointLight.distance = value;
|
||||||
});
|
});
|
||||||
pointLightDistanceGui.onFinishChange((value) => {
|
pointLightDistanceGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
pointLightPositionXGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.pointLight.position.x = value;
|
this.light.pointLight.position.x = value;
|
||||||
});
|
});
|
||||||
pointLightPositionXGui.onFinishChange((value) => {
|
pointLightPositionXGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
pointLightPositionYGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.pointLight.position.y = value;
|
this.light.pointLight.position.y = value;
|
||||||
});
|
});
|
||||||
pointLightPositionYGui.onFinishChange((value) => {
|
pointLightPositionYGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
pointLightPositionZGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.pointLight.position.z = value;
|
this.light.pointLight.position.z = value;
|
||||||
});
|
});
|
||||||
pointLightPositionZGui.onFinishChange((value) => {
|
pointLightPositionZGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
// Hemi Light
|
// Hemi Light
|
||||||
let hemiLightFolder = gui.addFolder('Hemi Light');
|
const hemiLightFolder = gui.addFolder('Hemi Light');
|
||||||
hemiLightFolder.add(Config.hemiLight, 'enabled').name('Enabled').onChange((value) => {
|
hemiLightFolder.add(Config.hemiLight, 'enabled').name('Enabled').onChange((value) => {
|
||||||
this.light.hemiLight.visible = value;
|
this.light.hemiLight.visible = value;
|
||||||
});
|
});
|
||||||
|
@ -296,40 +296,40 @@ export default class GUI {
|
||||||
hemiLightFolder.addColor(Config.hemiLight, 'groundColor').name('ground Color').onChange((value) => {
|
hemiLightFolder.addColor(Config.hemiLight, 'groundColor').name('ground Color').onChange((value) => {
|
||||||
this.light.hemiLight.groundColor.setHex(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) => {
|
hemiLightIntensityGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.hemiLight.intensity = value;
|
this.light.hemiLight.intensity = value;
|
||||||
});
|
});
|
||||||
hemiLightIntensityGui.onFinishChange((value) => {
|
hemiLightIntensityGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
hemiLightPositionXGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.hemiLight.position.x = value;
|
this.light.hemiLight.position.x = value;
|
||||||
});
|
});
|
||||||
hemiLightPositionXGui.onFinishChange((value) => {
|
hemiLightPositionXGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
hemiLightPositionYGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.hemiLight.position.y = value;
|
this.light.hemiLight.position.y = value;
|
||||||
});
|
});
|
||||||
hemiLightPositionYGui.onFinishChange((value) => {
|
hemiLightPositionYGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
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) => {
|
hemiLightPositionZGui.onChange((value) => {
|
||||||
this.controls.enableRotate = false;
|
this.controls.enableRotate = false;
|
||||||
|
|
||||||
this.light.hemiLight.position.z = value;
|
this.light.hemiLight.position.z = value;
|
||||||
});
|
});
|
||||||
hemiLightPositionZGui.onFinishChange((value) => {
|
hemiLightPositionZGui.onFinishChange(() => {
|
||||||
this.controls.enableRotate = true;
|
this.controls.enableRotate = true;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
@ -363,7 +363,7 @@ export default class GUI {
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
update() {
|
update(mesh) {
|
||||||
this.needsUpdate(mesh.material, mesh.geometry);
|
this.needsUpdate(mesh.material, mesh.geometry);
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,54 +1,56 @@
|
||||||
import THREE from 'three';
|
import Keyboard from '../../utils/keyboard';
|
||||||
|
import Helpers from '../../utils/helpers';
|
||||||
import Keyboard from './../utils/keyboard';
|
import Config from '../../data/config';
|
||||||
import Helpers from './../utils/helpers';
|
|
||||||
import Config from './../data/config';
|
|
||||||
|
|
||||||
export default class Interaction {
|
export default class Interaction {
|
||||||
constructor(renderer, scene, camera, controls) {
|
constructor(renderer, scene, camera, controls) {
|
||||||
|
// Properties
|
||||||
this.renderer = renderer;
|
this.renderer = renderer;
|
||||||
this.scene = scene;
|
this.scene = scene;
|
||||||
this.camera = camera;
|
this.camera = camera;
|
||||||
this.controls = controls;
|
this.controls = controls;
|
||||||
|
|
||||||
|
// Instantiate keyboard helper
|
||||||
this.keyboard = new Keyboard();
|
this.keyboard = new Keyboard();
|
||||||
|
|
||||||
// listeners
|
// Listeners
|
||||||
// mouse events
|
// Mouse events
|
||||||
this.renderer.domElement.addEventListener('mouseup', (event) => this.onMouseUp(event), false);
|
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('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('mouseleave', (event) => this.onMouseLeave(event), false);
|
||||||
this.renderer.domElement.addEventListener('mouseover', (event) => this.onMouseOver(event), false);
|
this.renderer.domElement.addEventListener('mouseover', (event) => this.onMouseOver(event), false);
|
||||||
|
|
||||||
// keyboard events
|
// Keyboard events
|
||||||
this.keyboard.domElement.addEventListener('keydown', (event) => {
|
this.keyboard.domElement.addEventListener('keydown', (event) => {
|
||||||
if(event.repeat) {
|
if(event.repeat) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
if(this.keyboard.eventMatches(event, 'escape')) {
|
if(this.keyboard.eventMatches(event, 'escape')) {
|
||||||
console.log('Escape pressed');
|
console.log('Escape pressed');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseEnter(event) {
|
|
||||||
event.preventDefault();
|
|
||||||
}
|
|
||||||
|
|
||||||
onMouseOver(event) {
|
onMouseOver(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
Config.isMouseOver = true;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseLeave(event) {
|
onMouseLeave(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
|
|
||||||
|
Config.isMouseOver = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
onMouseMove(event) {
|
onMouseMove(event) {
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
}
|
|
||||||
|
|
||||||
onMouseUp(event) {
|
setTimeout(function() {
|
||||||
event.preventDefault();
|
Config.isMouseMoving = false;
|
||||||
|
}, 200);
|
||||||
|
|
||||||
|
Config.isMouseMoving = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -1,8 +1,8 @@
|
||||||
import THREE from 'three';
|
import * as THREE from 'three';
|
||||||
|
|
||||||
import Material from './material';
|
import Material from '../helpers/material';
|
||||||
import Helper from './helper';
|
import Helper from '../helpers/helper';
|
||||||
import Config from './../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
export default class Model {
|
export default class Model {
|
||||||
constructor(scene, manager, textures) {
|
constructor(scene, manager, textures) {
|
||||||
|
@ -18,7 +18,7 @@ export default class Model {
|
||||||
this.loader.load(Config.model.path, (obj) => {
|
this.loader.load(Config.model.path, (obj) => {
|
||||||
obj.traverse((child) => {
|
obj.traverse((child) => {
|
||||||
if(child instanceof THREE.Mesh) {
|
if(child instanceof THREE.Mesh) {
|
||||||
let material = new Material().standard;
|
const material = new Material().standard;
|
||||||
material.map = this.textures.UV;
|
material.map = this.textures.UV;
|
||||||
child.material = material;
|
child.material = material;
|
||||||
|
|
||||||
|
@ -45,13 +45,13 @@ export default class Model {
|
||||||
|
|
||||||
static onProgress(xhr) {
|
static onProgress(xhr) {
|
||||||
if(xhr.lengthComputable) {
|
if(xhr.lengthComputable) {
|
||||||
let percentComplete = xhr.loaded / xhr.total * 100;
|
const percentComplete = xhr.loaded / xhr.total * 100;
|
||||||
|
|
||||||
console.log(Math.round(percentComplete, 2) + '% downloaded');
|
console.log(Math.round(percentComplete, 2) + '% downloaded');
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
static onError(xhr) {
|
static onError(xhr) {
|
||||||
console.error(xhr);
|
console.error(xhr);
|
||||||
};
|
}
|
||||||
}
|
}
|
|
@ -1,7 +1,7 @@
|
||||||
import THREE from 'three';
|
import * as THREE from 'three';
|
||||||
import { Promise } from 'es6-promise';
|
import { Promise } from 'es6-promise';
|
||||||
|
|
||||||
import Config from './../data/config';
|
import Config from '../../data/config';
|
||||||
|
|
||||||
export default class Texture {
|
export default class Texture {
|
||||||
constructor() {
|
constructor() {
|
||||||
|
@ -13,7 +13,7 @@ export default class Texture {
|
||||||
const maxAnisotropy = Config.maxAnisotropy;
|
const maxAnisotropy = Config.maxAnisotropy;
|
||||||
const imageFiles = Config.texture.imageFiles;
|
const imageFiles = Config.texture.imageFiles;
|
||||||
|
|
||||||
let promiseArray = [];
|
const promiseArray = [];
|
||||||
|
|
||||||
loader.setPath(Config.texture.path);
|
loader.setPath(Config.texture.path);
|
||||||
|
|
||||||
|
@ -30,7 +30,7 @@ export default class Texture {
|
||||||
resolve(modelOBJ);
|
resolve(modelOBJ);
|
||||||
},
|
},
|
||||||
function(xhr) {
|
function(xhr) {
|
||||||
console.log(( xhr.loaded / xhr.total * 100 ) + '% loaded');
|
console.log(xhr.loaded / xhr.total * 100 + '% loaded');
|
||||||
},
|
},
|
||||||
function(xhr) {
|
function(xhr) {
|
||||||
reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));
|
reject(new Error(xhr + 'An error occurred loading while loading ' + imageFile.image));
|
Loading…
Reference in New Issue