0.1.0 • Published 7 years ago
whs-module-dat.gui v0.1.0
whs-module-dat.gui - User Interface for runtime editing properties
Simple configuration
const sphere = new WHS.Sphere({
material: new THREE.MeshBasicMaterial({color: 0xffffff}),
modules: [
new DatGUIModule({
name: 'MySphere', // name of folder for this component
material: true // use material
})
]
});
Advanced configuration
const sphere = new WHS.Sphere({
material: new THREE.MeshBasicMaterial({color: 0xffffff}),
modules: [
new WHS.mesh.DynamicGeometryModule(),
new DatGUIModule({
name: 'MySphere',
material: true,
geometry: true, // Update geometry parameters
tryMaterial: [ // Beta feature. Allows you to change material to the one of the following
THREE.MeshBasicMaterial,
THREE.MeshLambertMaterial,
THREE.MeshPhongMaterial
],
custom: { // custom parameters
hello: (value, component) => { // onChange function
console.log(value);
}
},
defaults: { // Default values for "custom"
hello: 1
},
range: { // min and max for "custom"
hello: [0, 10]
},
step: { // steps for "custom"
hello: 2
}
})
]
});
geometry
parameter requiresWHS.mesh.DynamicGeometryModule
to be set beforeDatGUIModule
.
Screenshot
Todo
- Make ability to use several components. Add DatGUI to App
- Make
tryMaterial
change without reloading material folder - Wide support for colors & custom data
- Ability to get dat.GUI from callback
0.1.0
7 years ago