Set up gltf loading, set up switching, fixed imports, fixed helpers, added model gui

This commit is contained in:
Paul Graffam 2020-07-06 17:29:08 -04:00
parent 548da33664
commit 6374273055
4 changed files with 159 additions and 55 deletions

View File

@ -1,6 +1,6 @@
// Global imports - // Global imports -
import * as THREE from 'three'; import * as THREE from 'three';
import TWEEN from 'tween.js'; import TWEEN from '@tweenjs/tween.js';
// Local imports - // Local imports -
// Components // Components
@ -8,10 +8,11 @@ import Renderer from './components/renderer';
import Camera from './components/camera'; import Camera from './components/camera';
import Light from './components/light'; import Light from './components/light';
import Controls from './components/controls'; import Controls from './components/controls';
import Geometry from './components/geometry';
// Helpers // Helpers
import Geometry from './helpers/geometry';
import Stats from './helpers/stats'; import Stats from './helpers/stats';
import MeshHelper from './helpers/meshHelper';
// Model // Model
import Texture from './model/texture'; import Texture from './model/texture';
@ -66,6 +67,11 @@ export default class Main {
this.stats.setUp(); this.stats.setUp();
} }
// Set up gui
if (Config.isDev) {
this.gui = new DatGUI(this)
}
// Instantiate texture class // Instantiate texture class
this.texture = new Texture(); this.texture = new Texture();
@ -75,7 +81,7 @@ export default class Main {
// Textures loaded, load model // Textures loaded, load model
this.model = new Model(this.scene, this.manager, this.texture.textures); this.model = new Model(this.scene, this.manager, this.texture.textures);
this.model.load(); this.model.load(Config.models[Config.model.selected].type);
// onProgress callback // onProgress callback
this.manager.onProgress = (item, loaded, total) => { this.manager.onProgress = (item, loaded, total) => {
@ -89,7 +95,10 @@ export default class Main {
// Add dat.GUI controls if dev // Add dat.GUI controls if dev
if(Config.isDev) { if(Config.isDev) {
new DatGUI(this, this.model.obj); this.meshHelper = new MeshHelper(this.scene, this.model.obj);
if (Config.mesh.enableHelper) this.meshHelper.enable();
this.gui.load(this, this.model.obj);
} }
// Everything is now fully loaded // Everything is now fully loaded

View File

@ -2,18 +2,27 @@ import Config from '../../data/config';
// Manages all dat.GUI interactions // Manages all dat.GUI interactions
export default class DatGUI { export default class DatGUI {
constructor(main, mesh) { constructor(main) {
const gui = new dat.GUI(); this.gui = new dat.GUI();
this.camera = main.camera.threeCamera; this.camera = main.camera.threeCamera;
this.controls = main.controls.threeControls; this.controls = main.controls.threeControls;
this.light = main.light; this.light = main.light;
this.scene = main.scene;
this.model = null;
this.meshHelper = null;
}
load(main, mesh) {
/* Global */ /* Global */
//gui.close(); //this.gui.close();
this.model = main.model;
this.meshHelper = main.meshHelper;
/* Camera */ /* Camera */
const cameraFolder = gui.addFolder('Camera'); const cameraFolder = this.gui.addFolder('Camera');
const 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;
@ -38,13 +47,13 @@ export default class DatGUI {
}); });
const 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); this.scene.fog.color.setHex(value);
}); });
const 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; this.scene.fog.density = value;
}); });
cameraFogNearGui.onFinishChange(() => { cameraFogNearGui.onFinishChange(() => {
this.controls.enableRotate = true; this.controls.enableRotate = true;
@ -52,7 +61,7 @@ export default class DatGUI {
/* Controls */ /* Controls */
const controlsFolder = gui.addFolder('Controls'); const controlsFolder = this.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;
}); });
@ -66,8 +75,29 @@ export default class DatGUI {
}); });
/* Model */
const modelFolder = this.gui.addFolder('Model');
modelFolder.add(Config.model, 'type', [...Config.model.initialTypes]).name('Select Model').onChange((value) => {
if (value) {
if (Config.mesh.enableHelper)
this.meshHelper.disable();
Config.model.selected = Config.model.initialTypes.indexOf(value);
this.unload();
this.model.unload();
this.model.load(value);
}
});
/* Mesh */ /* Mesh */
const meshFolder = gui.addFolder('Mesh'); const meshFolder = this.gui.addFolder('Mesh');
meshFolder.add(Config.mesh, 'enableHelper', true).name('Enable Helpers').onChange((value) => {
if(value) {
this.meshHelper.enable();
} else {
this.meshHelper.disable();
}
});
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;
@ -83,7 +113,7 @@ export default class DatGUI {
/* Lights */ /* Lights */
// Ambient Light // Ambient Light
const ambientLightFolder = gui.addFolder('Ambient Light'); const ambientLightFolder = this.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;
}); });
@ -93,7 +123,7 @@ export default class DatGUI {
// Directional Light // Directional Light
const directionalLightFolder = gui.addFolder('Directional Light'); const directionalLightFolder = this.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;
}); });
@ -138,7 +168,7 @@ export default class DatGUI {
}); });
// Shadow Map // Shadow Map
const shadowFolder = gui.addFolder('Shadow Map'); const shadowFolder = this.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;
}); });
@ -232,7 +262,7 @@ export default class DatGUI {
// Point Light // Point Light
const pointLightFolder = gui.addFolder('Point Light'); const pointLightFolder = this.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;
}); });
@ -287,7 +317,7 @@ export default class DatGUI {
// Hemi Light // Hemi Light
const hemiLightFolder = gui.addFolder('Hemi Light'); const hemiLightFolder = this.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;
}); });
@ -334,4 +364,9 @@ export default class DatGUI {
this.controls.enableRotate = true; this.controls.enableRotate = true;
}); });
} }
unload() {
this.gui.destroy();
this.gui = new dat.GUI();
}
} }

View File

@ -1,8 +1,9 @@
import * as THREE from 'three'; import * as THREE from 'three';
import Material from '../helpers/material'; import Material from '../components/material';
import MeshHelper from '../helpers/meshHelper';
import Helpers from '../../utils/helpers'; import Helpers from '../../utils/helpers';
import { BufferGeometryUtils } from '../../utils/bufferGeometryUtils';
import { GLTFLoader } from '../loaders/GLTFLoader';
import Config from '../../data/config'; import Config from '../../data/config';
// Loads in a single object from the config file // Loads in a single object from the config file
@ -10,16 +11,60 @@ export default class Model {
constructor(scene, manager, textures) { constructor(scene, manager, textures) {
this.scene = scene; this.scene = scene;
this.textures = textures; this.textures = textures;
this.manager = manager;
// Manager is passed in to loader to determine when loading done in main
this.loader = new THREE.ObjectLoader(manager);
this.obj = null; this.obj = null;
this.ref = null;
} }
load() { load(type) {
// Manager is passed in to loader to determine when loading done in main
switch (type) {
case 'gltf':
// Load model with selected loader
new GLTFLoader(this.manager).load(
Config.models[Config.model.selected].path,
(gltf) => {
const scene = gltf.scene;
let mesh;
if (Config.shadow.enabled) {
scene.traverse(function(node) {
if (node.isMesh || node.isLight) node.castShadow = true;
if (node.isMesh) {
node.material.wireframe = Config.mesh.wireframe;
mesh = node;
}
});
}
this.obj = mesh;
BufferGeometryUtils.computeTangents(mesh.geometry);
var group = new THREE.Group();
group.scale.multiplyScalar(0.25);
this.scene.add( group );
this.ref = group;
// To make sure that the matrixWorld is up to date for the boxhelpers
group.updateMatrixWorld(true);
group.add(mesh);
// Add to scene
this.scene.add(scene);
},
Helpers.logProgress(),
Helpers.logError()
);
break;
case 'object':
// Load model with ObjectLoader // Load model with ObjectLoader
this.loader.load( new THREE.ObjectLoader(this.manager).load(
Config.model.path, Config.models[Config.model.selected].path,
obj => { obj => {
obj.traverse(child => { obj.traverse(child => {
if(child instanceof THREE.Mesh) { if(child instanceof THREE.Mesh) {
@ -36,19 +81,21 @@ export default class Model {
} }
}); });
// Add mesh helper if Dev
if(Config.isDev && Config.mesh.enableHelper) {
new MeshHelper(this.scene, obj);
}
// Set prop to obj so it can be accessed from outside the class // Set prop to obj so it can be accessed from outside the class
this.obj = obj; this.obj = obj;
this.ref = obj;
obj.scale.multiplyScalar(Config.model.scale); obj.scale.multiplyScalar(Config.models[Config.model.selected].scale);
this.scene.add(obj); this.scene.add(obj);
}, },
Helpers.logProgress(), Helpers.logProgress(),
Helpers.logError() Helpers.logError()
); );
break;
}
}
unload() {
this.scene.remove(this.ref);
} }
} }

View File

@ -1,4 +1,4 @@
import TWEEN from 'tween.js'; import TWEEN from '@tweenjs/tween.js';
// This object contains the state of the app // This object contains the state of the app
export default { export default {
@ -14,9 +14,22 @@ export default {
easing: TWEEN.Easing.Quadratic.InOut, easing: TWEEN.Easing.Quadratic.InOut,
duration: 500, duration: 500,
model: { model: {
path: './assets/models/Teapot.json', selected: 0,
scale: 20 initialTypes: ['gltf', 'object'],
type: 'gltf'
}, },
models: [
{
path: './assets/models/duck.gltf',
scale: 20,
type: 'gltf'
},
{
path: './assets/models/Teapot.json',
scale: 20,
type: 'object'
}
],
texture: { texture: {
path: './assets/textures/', path: './assets/textures/',
imageFiles: [ imageFiles: [
@ -24,7 +37,7 @@ export default {
] ]
}, },
mesh: { mesh: {
enableHelper: false, enableHelper: true,
wireframe: false, wireframe: false,
translucent: false, translucent: false,
material: { material: {