Panel light example

jasonsturges · Nov 17, 2024 · 667c4e7 · 667c4e7
1 parent b387f81
commit 667c4e7
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 0 deletions.
diff --git a/examples/index.html b/examples/index.html
@@ -100,6 +100,7 @@ <h2>Models</h2>
             <li><a href="/three-low-poly/models/science/lever-panel">Lever Panel</a></li>
             <li><a href="/three-low-poly/models/science/microscope">Microscope</a></li>
             <li><a href="/three-low-poly/models/science/mortar-and-pestle">Mortar and Pestle</a></li>
+            <li><a href="/three-low-poly/models/science/panel-light">Panel Light</a></li>
             <li><a href="/three-low-poly/models/science/spiral-tube">Spiral Tube</a></li>
             <li><a href="/three-low-poly/models/science/stand">Stand</a></li>
             <li><a href="/three-low-poly/models/science/tesla-coil">Tesla Coil</a></li>

diff --git a/examples/models/science/panel-light.html b/examples/models/science/panel-light.html
@@ -0,0 +1,48 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Three Low Poly</title>
+    <style>
+      body {
+        margin: 0;
+      }
+      canvas {
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import GUI from "lil-gui";
+      import { PanelLight, centerMesh } from "../../../src/index.js";
+      import { createOrbitScene } from "../../utils/orbitScene.js";
+
+      const { scene } = createOrbitScene();
+
+      const gui = new GUI();
+
+      const params = {
+        color: 0xffc7c7,
+        emissive: 0xff0000,
+        emissiveIntensity: 0.5,
+      };
+
+      let panelLight = new PanelLight(params);
+      scene.add(panelLight);
+      centerMesh(panelLight);
+
+      gui.addColor(params, "color").name("Color").onChange(update);
+      gui.addColor(params, "emissive").name("Emissive").onChange(update);
+      gui.add(params, "emissiveIntensity", 0, 1, 0.001).name("Emissive Intensity").onChange(update);
+
+      function update() {
+        scene.remove(panelLight);
+        panelLight = new PanelLight(params);
+        scene.add(panelLight);
+        centerMesh(panelLight);
+      }
+    </script>
+  </body>
+</html>