whs-cube-spheres
Version:
This plugin has a container with multiple spheres.
70 lines (56 loc) • 1.87 kB
Markdown
# whs-module-dat.gui - User Interface for runtime editing properties
[](https://www.npmjs.com/package/whs-module-dat.gui)
<img src="http://i.imgur.com/Qq8ptt8.png" width="50%">
### Simple configuration
```javascript
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
```javascript
const sphere = new WHS.Sphere({
material: new THREE.MeshBasicMaterial({color: 0xffffff}),
modules: [
new WHS.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 requires `WHS.DynamicGeometryModule` to be set before `DatGUIModule`.
## 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