Light flicker animation example

jasonsturges · Nov 24, 2024 · ecebdb3 · ecebdb3
1 parent e27498f
commit ecebdb3
Show file tree

Hide file tree

Showing 2 changed files with 106 additions and 0 deletions.
diff --git a/examples/animators/light-flicker.html b/examples/animators/light-flicker.html
@@ -0,0 +1,105 @@
+<!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;
+        color: #dfd9bc;
+      }
+    </style>
+  </head>
+  <body>
+    <script type="module">
+      import * as THREE from "three";
+      import GUI from "lil-gui";
+      import { Candle, LightFlickerAnimation } from "../../src/index.js";
+      import { createOrbitScene } from "../utils/orbitScene.js";
+
+      const { scene, camera, handlers } = createOrbitScene();
+      camera.position.set(0, 2, 4);
+
+      // Light animation array
+      const animations = [];
+
+      for (let i = 1; i <= 10; i++) {
+        const angle = ((i - 1) / 10) * Math.PI * 2;
+
+        // Create a candle
+        const candle = new Candle({
+          height: i * 0.1,
+          flameHeight: 0.25,
+        });
+        candle.position.set(Math.cos(angle) * 2.5, 0, Math.sin(angle) * 2.5);
+        candle.castShadow = true;
+        scene.add(candle);
+
+        // Create a point light
+        const candleLight = new THREE.PointLight(0xffa500, 1, 5);
+        candleLight.position.set(Math.cos(angle) * 2.5, i * 0.1 + 0.125, Math.sin(angle) * 2.5);
+        candleLight.castShadow = true;
+        scene.add(candleLight);
+
+        // Create a light flicker animation
+        const lightAnimation = new LightFlickerAnimation({
+          light: candleLight,
+          x: Math.cos(angle) * 2.5,
+          y: i * 0.1 + 0.125,
+          z: Math.sin(angle) * 2.5,
+        });
+        animations.push(lightAnimation);
+        handlers.push(() => lightAnimation.update());
+
+        // Create a helper
+        const helper = new THREE.PointLightHelper(candleLight, 0.1);
+        helper.visible = false;
+        scene.add(helper);
+      }
+
+      const plane = new THREE.Mesh(new THREE.PlaneGeometry(10, 10), new THREE.MeshStandardMaterial({ color: 0x333333 }));
+      plane.rotation.x = -Math.PI / 2;
+      plane.receiveShadow = true;
+      scene.add(plane);
+
+      const gui = new GUI();
+
+      const params = {
+        maxIntensity: 1.2,
+        minIntensity: 0.8,
+        jitterX: 0.02,
+        jitterY: 0.0,
+        jitterZ: 0.02,
+        showHelpers: false,
+      };
+
+      gui.title("Light Flicker Animator");
+      gui.add(params, "maxIntensity", 0, 2, 0.001).name("Max Intensity").onChange(() => update());
+      gui.add(params, "minIntensity", 0, 2, 0.001).name("Min Intensity").onChange(() => update());
+      gui.add(params, "jitterX", 0, 0.25, 0.001).name("Jitter X").onChange(() => update());
+      gui.add(params, "jitterY", 0, 0.25, 0.001).name("Jitter Y").onChange(() => update());
+      gui.add(params, "jitterZ", 0, 0.25, 0.001).name("Jitter Z").onChange(() => update());
+      gui.add(params, 'showHelpers').name('Show Helpers').onChange(() => update());
+
+      function update() {
+        for (const animation of animations) {
+          animation.maxIntensity = params.maxIntensity;
+          animation.minIntensity = params.minIntensity;
+          animation.jitterX = params.jitterX;
+          animation.jitterY = params.jitterY;
+          animation.jitterZ = params.jitterZ;
+
+          scene.traverse((object) => {
+            if (object instanceof THREE.PointLightHelper) {
+              object.visible = params.showHelpers;
+            }
+          });
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -205,6 +205,7 @@ <h2>Animators</h2>
           <ul>
             <li><a href="/three-low-poly/animators/camera">Camera</a></li>
             <li><a href="/three-low-poly/animators/emissive-pulse">Emissive Pulse</a></li>
+            <li><a href="/three-low-poly/animators/light-flicker">Light Flicker</a></li>
             <li><a href="/three-low-poly/animators/lightning">Lightning</a></li>
           </ul>
         </div>