Packaged Builds
The easiest way to use dat.GUI in your code is by using the built source at
<script type="text/javascript" src="dat.gui.min.js"></script>
Installing from npm
$ npm install --save dat.gui
// CommonJS:
const dat = require('dat.gui');
// ES6:
import * as dat from 'dat.gui';
const gui = new dat.GUI();
Basic usage
// Example
const gui = new dat.gui.GUI();
params1 = {
color: 0xffffff,
envMap: 'none',
reflectivity: 1,
albedoMap: 'none',
normalMap: 'none',
normalScale: 1,
shininess: 30,
facetted: false,
normals: 'none'
}
gui.add(params1, 'normals', ['none', 'face', 'vertex']).onChange(function(value){
faceNormalsHelper.visible = false;
vertexNormalsHelper.visible = false;
phongMaterial.wireframe = false;
switch(value){
case 'face':
faceNormalsHelper.visible = true;
phongMaterial.wireframe = true;
break;
case 'vertex':
vertexNormalsHelper.visible = true;
phongMaterial.wireframe = true;
break;
}
});
const f1 = gui.addFolder('Phong Material');
f1.addColor(params1, 'color').onChange( function() { phongMaterial.color.set( params1.color ); } );
f1.add(params1, 'envMap', ['none', 'cathedral']).onChange( function(){
switch (params1.envMap){
case 'cathedral':
phongMaterial.envMap = envMap;
break;
default:
phongMaterial.envMap = null;
break;
}
phongMaterial.needsUpdate = true;
});
f1.open();
Good Example can be found here
Leave A Comment?