Browse Source

fix intensity gui

Gregg Tavares 6 years ago
parent
commit
e145b6f4f8

+ 8 - 8
threejs/lessons/threejs-lights.md

@@ -156,7 +156,7 @@ And here's our code setting up dat.GUI
 ```javascript
 ```javascript
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'intensity', 0, 2);
+gui.add(light, 'intensity', 0, 2, 0.01);
 ```
 ```
 
 
 And here's the result
 And here's the result
@@ -204,7 +204,7 @@ const gui = new dat.GUI();
 -gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 -gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 +gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
 +gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
 +gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
 +gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
-gui.add(light, 'intensity', 0, 2);
+gui.add(light, 'intensity', 0, 2, 0.01);
 ```
 ```
 
 
 The result:
 The result:
@@ -242,7 +242,7 @@ our GUI.
 ```javascript
 ```javascript
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'intensity', 0, 2);
+gui.add(light, 'intensity', 0, 2, 0.01);
 gui.add(light.target.position, 'x', -10, 10);
 gui.add(light.target.position, 'x', -10, 10);
 gui.add(light.target.position, 'z', -10, 10);
 gui.add(light.target.position, 'z', -10, 10);
 gui.add(light.target.position, 'y', 0, 10);
 gui.add(light.target.position, 'y', 0, 10);
@@ -294,7 +294,7 @@ and the target's position like this
 
 
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'intensity', 0, 2);
+gui.add(light, 'intensity', 0, 2, 0.01);
 
 
 +makeXYZGUI(gui, light.position, 'position', updateLight);
 +makeXYZGUI(gui, light.position, 'position', updateLight);
 +makeXYZGUI(gui, light.target.position, 'target', updateLight);
 +makeXYZGUI(gui, light.target.position, 'target', updateLight);
@@ -359,7 +359,7 @@ Let's setup the GUI so we can adjust the distance.
 ```javascript
 ```javascript
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'intensity', 0, 2);
+gui.add(light, 'intensity', 0, 2, 0.01);
 +gui.add(light, 'distance', 0, 40).onChange(updateLight);
 +gui.add(light, 'distance', 0, 40).onChange(updateLight);
 
 
 makeXYZGUI(gui, light.position, 'position', updateLight);
 makeXYZGUI(gui, light.position, 'position', updateLight);
@@ -416,7 +416,7 @@ outer cone. When `penumbra` is .5 then the light fades starting from 50% between
 the center of the outer cone.
 the center of the outer cone.
 
 
 ```javascript
 ```javascript
-gui.add(light, 'penumbra', 0, 1);
+gui.add(light, 'penumbra', 0, 1, 0.01);
 ```
 ```
 
 
 {{{example url="../threejs-lights-spot-w-helper.html" }}}
 {{{example url="../threejs-lights-spot-w-helper.html" }}}
@@ -507,7 +507,7 @@ its `width` and `height`
 ```javascript
 ```javascript
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'intensity', 0, 10);
+gui.add(light, 'intensity', 0, 10, 0.01);
 gui.add(light, 'width', 0, 20).onChange(updateLight);
 gui.add(light, 'width', 0, 20).onChange(updateLight);
 gui.add(light, 'height', 0, 20).onChange(updateLight);
 gui.add(light, 'height', 0, 20).onChange(updateLight);
 gui.add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180).name('x rotation').onChange(updateLight);
 gui.add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180).name('x rotation').onChange(updateLight);
@@ -558,7 +558,7 @@ and we'll add gui so we can change the `power` and `decay`
 ```javascript
 ```javascript
 const gui = new dat.GUI();
 const gui = new dat.GUI();
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
 gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-gui.add(light, 'decay', 0, 4);
+gui.add(light, 'decay', 0, 4, 0.01);
 gui.add(light, 'power', 0, 2000);
 gui.add(light, 'power', 0, 2000);
 ```
 ```
 
 

+ 1 - 1
threejs/threejs-lights-ambient.html

@@ -106,7 +106,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
   }
   }
 
 
   function resizeRendererToDisplaySize(renderer) {
   function resizeRendererToDisplaySize(renderer) {

+ 1 - 1
threejs/threejs-lights-directional-w-helper.html

@@ -126,7 +126,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
 
 
     makeXYZGUI(gui, light.position, 'position', updateLight);
     makeXYZGUI(gui, light.position, 'position', updateLight);
     makeXYZGUI(gui, light.target.position, 'target', updateLight);
     makeXYZGUI(gui, light.target.position, 'target', updateLight);

+ 1 - 1
threejs/threejs-lights-directional.html

@@ -109,7 +109,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
     gui.add(light.target.position, 'x', -10, 10);
     gui.add(light.target.position, 'x', -10, 10);
     gui.add(light.target.position, 'z', -10, 10);
     gui.add(light.target.position, 'z', -10, 10);
     gui.add(light.target.position, 'y', 0, 10);
     gui.add(light.target.position, 'y', 0, 10);

+ 1 - 1
threejs/threejs-lights-hemisphere.html

@@ -109,7 +109,7 @@ function main() {
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('skyColor');
     gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
     gui.addColor(new ColorGUIHelper(light, 'groundColor'), 'value').name('groundColor');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
   }
   }
 
 
   function resizeRendererToDisplaySize(renderer) {
   function resizeRendererToDisplaySize(renderer) {

+ 1 - 1
threejs/threejs-lights-point-physically-correct.html

@@ -122,7 +122,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'decay', 0, 4);
+    gui.add(light, 'decay', 0, 4, 0.01);
     gui.add(light, 'power', 0, 1220);
     gui.add(light, 'power', 0, 1220);
 
 
     makeXYZGUI(gui, light.position, 'position');
     makeXYZGUI(gui, light.position, 'position');

+ 1 - 1
threejs/threejs-lights-point.html

@@ -122,7 +122,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
     gui.add(light, 'distance', 0, 40).onChange(updateLight);
     gui.add(light, 'distance', 0, 40).onChange(updateLight);
 
 
     makeXYZGUI(gui, light.position, 'position');
     makeXYZGUI(gui, light.position, 'position');

+ 1 - 1
threejs/threejs-lights-rectarea.html

@@ -139,7 +139,7 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 10);
+    gui.add(light, 'intensity', 0, 10, 0.01);
     gui.add(light, 'width', 0, 20).onChange(updateLight);
     gui.add(light, 'width', 0, 20).onChange(updateLight);
     gui.add(light, 'height', 0, 20).onChange(updateLight);
     gui.add(light, 'height', 0, 20).onChange(updateLight);
     gui.add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180).name('x rotation').onChange(updateLight);
     gui.add(new DegRadHelper(light.rotation, 'x'), 'value', -180, 180).name('x rotation').onChange(updateLight);

+ 2 - 2
threejs/threejs-lights-spot-w-helper.html

@@ -139,10 +139,10 @@ function main() {
 
 
     const gui = new dat.GUI();
     const gui = new dat.GUI();
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
     gui.addColor(new ColorGUIHelper(light, 'color'), 'value').name('color');
-    gui.add(light, 'intensity', 0, 2);
+    gui.add(light, 'intensity', 0, 2, 0.01);
     gui.add(light, 'distance', 0, 40).onChange(updateLight);
     gui.add(light, 'distance', 0, 40).onChange(updateLight);
     gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
     gui.add(new DegRadHelper(light, 'angle'), 'value', 0, 90).name('angle').onChange(updateLight);
-    gui.add(light, 'penumbra', 0, 1);
+    gui.add(light, 'penumbra', 0, 1, 0.01);
 
 
     makeXYZGUI(gui, light.position, 'position', updateLight);
     makeXYZGUI(gui, light.position, 'position', updateLight);
     makeXYZGUI(gui, light.target.position, 'target', updateLight);
     makeXYZGUI(gui, light.target.position, 'target', updateLight);