Add light attributes

FlorianFe · Feb 24, 2018 · c888d35 · c888d35
1 parent a1f0d95
commit c888d35
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 5 deletions.
diff --git a/demo/index.html b/demo/index.html
@@ -11,6 +11,7 @@
     <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
     <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
     <link rel="import" href="../../iron-icons/iron-icons.html">
+    <link rel="import" href="../../iron-icons/image-icons.html">
     <link rel="import" href="../../iron-icon/iron-icon.html">
     <link rel="import" href="../../paper-slider/paper-slider.html">
     <link rel="import" href="../../paper-card/paper-card.html">
@@ -111,6 +112,44 @@ <h3>Zoom</h3>
         </template>
       </demo-snippet>
 
+      <h3>Light</h3>
+      <demo-snippet>
+        <template>
+          <dom-bind id="scope2">
+            <template>
+              <voxel-visualization
+                schematic-path="schematics/tower.schematic"
+                texture-pack-path="faithful32pack/"
+                ambient-light-intensity="[[ambientLightIntensity]]"
+                directional-light-intensity="[[directionalLightIntensity]]"
+              ></voxel-visualization>
+
+              <br>
+
+              <table>
+                <tbody>
+                  <tr>
+                    <td class="small"><iron-icon icon="image:wb-sunny"></iron-icon></td>
+                    <td class="small">[[ambientLightIntensity]]</td>
+                    <td><paper-slider pin value="{{ambientLightIntensity}}" min="0" max="1.0" step="0.05"></paper-slider></td>
+                  </tr>
+                  <tr>
+                    <td class="small"><iron-icon icon="image:wb-sunny"></iron-icon></td>
+                    <td class="small">[[directionalLightIntensity]]</td>
+                    <td><paper-slider pin value="{{directionalLightIntensity}}" min="0" max="1.0" step="0.05"></paper-slider></td>
+                  </tr>
+                </tbody>
+              </table>
+            </template>
+          </dom-bind>
+
+          <script>
+            scope2.ambientLightIntensity = 0.75;
+            scope2.directionalLightIntensity = 0.5;
+          </script>
+        </template>
+      </demo-snippet>
+
       <paper-card>
         🗒 Note: The used texture pack "Faithful 32x32 Pack" (<a href="https://www.minecraftforum.net/forums/mapping-and-modding-java-edition/resource-packs/1223254-faithful-32x32-pack-update-red-cat-clay-1-8">Link</a>) was made by "Vattic".
       </paper-card>

diff --git a/voxel-visualization.js b/voxel-visualization.js
@@ -35,6 +35,16 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
       {
         type: Number,
         value: 1
+      },
+      ambientLightIntensity:
+      {
+        type: Number,
+        value: 0.5
+      },
+      directionalLightIntensity:
+      {
+        type: Number,
+        value: 0.5
       }
     };
   }
@@ -45,7 +55,9 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
         '_onSchematicJsonPathChanged(schematicJsonPath)',
         '_onSchematicPathChanged(schematicPath)',
         '_onSchematicChanged(schematic)',
-        '_onTexturePackPathChanged(texturePackPath)'
+        '_onTexturePackPathChanged(texturePackPath)',
+        '_onAmbientLightIntensityChanged(ambientLightIntensity)',
+        '_onDirectionalLightIntensityChanged(directionalLightIntensity)'
     ]
   }
 
@@ -90,6 +102,22 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
     });
   }
 
+  _onAmbientLightIntensityChanged(ambientLightIntensity)
+  {
+    let normalizedAmbientLightIntensity = parseInt(this.ambientLightIntensity * 0xff);
+    let ambientLightColor = normalizedAmbientLightIntensity * 0x010101;
+
+    this.ambientLight.color.set(ambientLightColor);
+  }
+
+  _onDirectionalLightIntensityChanged(directionalLightIntensity)
+  {
+    let normalizedDirectionalLightIntensity = parseInt(this.directionalLightIntensity * 0xff);
+    let directionalLightColor = normalizedDirectionalLightIntensity * 0x010101;
+
+    this.directionalLight.color.set(directionalLightColor);
+  }
+
   _onSchematicPathChanged(schematicPath)
   {
     let file = this.baseURI + schematicPath;
@@ -162,11 +190,17 @@ class VoxelVisualization extends Polymer.mixinBehaviors([Polymer.IronResizableBe
 
     this.scene = new THREE.Scene();
 
-    var ambientLight = new THREE.AmbientLight(0xdddddd);
-    var PointLight = new THREE.PointLight(0xffffff, 0.15);
+    let normalizedAmbientLightIntensity = parseInt(this.ambientLightIntensity * 0xff);
+    let ambientLightColor = normalizedAmbientLightIntensity * 0x010101;
+    this.ambientLight = new THREE.AmbientLight(ambientLightColor);
+
+    let normalizedDirectionalLightIntensity = parseInt(this.directionalLightIntensity * 0xff);
+    let directionalLightColor = normalizedDirectionalLightIntensity * 0x010101;
+    this.directionalLight = new THREE.DirectionalLight(directionalLightColor, 2);
+    this.directionalLight.position.set(2, 4, 5);
 
-    this.scene.add(ambientLight);
-    this.scene.add(PointLight);
+    this.scene.add(this.ambientLight);
+    this.scene.add(this.directionalLight);
 
     if(schematic)
     {