whs-module-dat.gui

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 requires WHS.mesh.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