Set up gltf loading, set up switching, fixed imports, fixed helpers, added model gui
This commit is contained in:
parent
548da33664
commit
6374273055
|
@ -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
|
||||||
|
|
|
@ -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();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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: {
|
||||||
|
|
Loading…
Reference in New Issue