WhitestormJS · sasha240100 · Mar 19, 2017 · Mar 15, 2017 · Mar 15, 2017 · Mar 15, 2017
diff --git a/examples/whs-module-dat.gui/mesh/script.js b/examples/whs-module-dat.gui/mesh/script.js
@@ -1,3 +1,5 @@
+const DatGUI = new DatGUIModule();
+
 const app = new WHS.App(
   new WHS.BasicAppPreset({
     camera: {
@@ -9,44 +11,68 @@ const app = new WHS.App(
   })
   .extend([
     new WHS.controls.OrbitModule(),
-    new StatsModule(0)
+    new StatsModule(0),
+    DatGUI
   ])
   .get()
 );
 
+app.$camera.applyModule(DatGUI.Camera({
+  name: 'camera'
+}));
+
 const sphere = new WHS.Sphere({
-  material: new THREE.MeshBasicMaterial({color: 0xffffff}),
+  material: new THREE.MeshLambertMaterial({color: 0xffffff}),
   modules: [
     new WHS.mesh.DynamicGeometryModule(),
-    new DatGUIModule({
-      name: 'MySphere',
-      material: true,
-      geometry: true,
-      tryMaterial: [
-        THREE.MeshBasicMaterial,
-        THREE.MeshLambertMaterial,
-        THREE.MeshPhongMaterial
-      ],
-      custom: {
-        hello: value => {
-          console.log(value);
+    DatGUI.Mesh({
+      name: 'Sphere1',
+      geometry: {
+        radius: {
+          range: [2, 100]
         }
-      },
-      defaults: {
-        hello: 1
-      },
-      range: {
-        hello: [0, 10]
-      },
-      step: {
-        hello: 2
       }
+    }).materials({
+      phong: new THREE.MeshPhongMaterial(),
+      depth: new THREE.MeshDepthMaterial(),
+      lambert: new THREE.MeshLambertMaterial(),
+      basic: new THREE.MeshBasicMaterial()
     })
   ]
 });
 
+DatGUI.folder('hello').folder('cool').Custom([{
+  name: 'myProp',
+  value: 10,
+  step: 10,
+  range: [false, 100],
+  onChange: v => {
+    console.log(`myProp: ${v}`);
+  }
+}]);
+
 new WHS.SpotLight({
-  position: [10, 10, 10]
+  position: [10, 20, 10],
+
+  light: {
+    distance: 200,
+    intensity: 2
+  },
+
+  modules: [
+    DatGUI.Light({
+      name: 'light1'
+    })
+  ]
+}).addTo(app);
+
+window.sp = sphere;
+
+new WHS.Plane({
+  geometry: [100, 100],
+  material: new THREE.MeshLambertMaterial({color: 0xffffff}),
+  position: [0, -10, 0],
+  rotation: [-Math.PI / 2, 0, 0]
 }).addTo(app);
 
 sphere.addTo(app);

diff --git a/modules/whs-module-dat.gui/build/DatGUIModule.js b/modules/whs-module-dat.gui/build/DatGUIModule.js
diff --git a/modules/whs-module-dat.gui/build/DatGUIModule.js.map b/modules/whs-module-dat.gui/build/DatGUIModule.js.map
diff --git a/modules/whs-module-dat.gui/src/DatAPI.js b/modules/whs-module-dat.gui/src/DatAPI.js
@@ -0,0 +1,47 @@
+export class DatAPI {
+  foldObject(object, origin, instance = this.fold, onChange = () => {}) {
+    for (let key in origin) {
+      const value = object[key];
+      if (!value) continue;
+
+      if (value.isColor) {
+        this.addColor(object, key, instance);
+      } else if (typeof origin[key] === 'object') {
+        if (object[key] === object) continue;
+        this.foldObject(object[key], origin[key], instance.addFolder(key));
+      } else {
+        const range = '1' + '0'.repeat(value.toString().length);
+
+        instance.add(object, key)
+          .min(0)
+          .step(range > 10 ? 1 : 0.1)
+          .onChange(onChange);
+      }
+    }
+  }
+
+  guiTransforms(native, instance = this.fold) {
+    if (!this.params.transforms) return;
+
+    const controller = instance.addFolder('transforms');
+
+    // position
+    const position = controller.addFolder('position');
+    position.add(native.position, 'x');
+    position.add(native.position, 'y');
+    position.add(native.position, 'z');
+
+    // rotation
+    const rotation = controller.addFolder('rotation');
+    rotation.add(native.rotation, 'x').step(0.1);
+    rotation.add(native.rotation, 'y').step(0.1);
+    rotation.add(native.rotation, 'z').step(0.1);
+
+    // scale
+    if (!native.scale) return;
+    const scale = controller.addFolder('scale');
+    scale.add(native.scale, 'x').step(0.1);
+    scale.add(native.scale, 'y').step(0.1);
+    scale.add(native.scale, 'z').step(0.1);
+  }
+}
diff --git a/modules/whs-module-dat.gui/src/DatCameraModule.js b/modules/whs-module-dat.gui/src/DatCameraModule.js
@@ -0,0 +1,39 @@
+import {DatAPI} from './DatAPI';
+
+export class DatCameraModule extends DatAPI {
+  constructor(params = {}, gui) {
+    super();
+
+    this.params = Object.assign({
+      name: 'Unknown camera',
+      transforms: true,
+      camera: true
+    }, params);
+
+    this.gui = gui;
+    this.fold = this.gui.addFolder(this.params.name);
+  }
+
+  integrate(self) {
+    if (this.native) {
+      self.bridge.camera.bind(this)(this.native, self);
+      self.bridge.onWrap.bind(this)(this.native, self);
+    }
+  }
+
+  bridge = {
+    camera(camera, self) {
+      // console.log(this);
+      if (!self.params.camera) return camera;
+      self.foldObject(camera, this.params.camera, self.fold, () => {
+        camera.updateProjectionMatrix();
+      });
+
+      return camera;
+    },
+
+    onWrap(a, self) {
+      self.guiTransforms(this.native, self.fold);
+    }
+  }
+};
diff --git a/modules/whs-module-dat.gui/src/DatCustomModule.js b/modules/whs-module-dat.gui/src/DatCustomModule.js
@@ -0,0 +1,31 @@
+export class DatCustomModule {
+  constructor(props = [], gui) {
+    this.props = props;
+    this.gui = gui;
+
+    props.forEach(this.add.bind(this));
+  }
+
+  add({
+    name,
+    value,
+    range = [false, false],
+    step = 1,
+    onChange,
+    onFinishChange,
+    listen = false
+  }) {
+    const controller = this.gui.add({[name]: value}, name);
+
+    if (range[0] !== false) controller.min(range[0])
+    if (range[1] !== false) controller.max(range[1])
+
+    controller.step(step);
+
+    if (onChange) controller.onChange(onChange);
+    if (onFinishChange) controller.onFinishChange(onFinishChange);
+    if (listen) controller.listen();
+
+    return controller;
+  }
+};
diff --git a/modules/whs-module-dat.gui/src/DatLightModule.js b/modules/whs-module-dat.gui/src/DatLightModule.js
@@ -0,0 +1,49 @@
+import {DatAPI} from './DatAPI';
+
+export class DatLightModule extends DatAPI {
+  constructor(params = {}, gui) {
+    super();
+
+    this.params = Object.assign({
+      name: 'Unknown light',
+      light: true,
+      shadow: true,
+      transforms: true,
+      gui: false
+    }, params);
+
+    this.gui = gui;
+    this.fold = this.gui.addFolder(this.params.name);
+  }
+
+  addColor(object, property, instance = this.fold) {
+    const color = object[property];
+
+    instance.addColor({[property]: color.getHex()}, property).onChange(value => {
+      if (typeof value === 'string') value.replace('#', '0x');
+      color.setHex(value);
+    });
+  }
+
+  integrate(self) {
+    if (this.native) {
+      self.bridge.light.bind(this)(this.native, self);
+      self.bridge.onWrap.bind(this)(this.native, self);
+    }
+  }
+
+  bridge = {
+    light(light, self) {
+      if (!self.params.light) return light;
+
+      self.foldObject(light, this.params.light, self.fold.addFolder('light'));
+      self.foldObject(light.shadow, this.params.shadow, self.fold.addFolder('shadow'));
+
+      return light;
+    },
+
+    onWrap(a, self) {
+      self.guiTransforms(this.native, self.fold);
+    }
+  }
+};