demos/demo1.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Anvil.js Lighting Demo</title>
  <script src="../build/anvil.js"></script>
</head>
<body>
  <canvas id="lightingCanvas" width="800" height="600"></canvas>
  <script>

    // Pull out the Scene, Polygon, Light, and SceneManager classes from the ANVIL object
    const { Scene, Polygon, Light, SceneManager } = ANVIL;

    // get the canvas
    const lightingCanvas = document.getElementById("lightingCanvas");

    // create a scene with lighting and FPS monitoring enabled
    const lightingScene = new Scene({
      lighting: true,
      fpsMonitoringEnabled: true,
      lightOptions: {
        ambient: 0.0001,
        fog: 2
      }
    });

    // Create and add polygons
    const polygon1 = new Polygon({
      points: [[100, 100], [150, 100], [150, 150], [100, 150]],
      backgroundColor: "#FF0000",
    });
    const polygon2 = new Polygon({
      points: [[200, 200], [250, 200], [250, 250], [200, 250]],
      backgroundColor: "#00FF00",
    });

    lightingScene.addObject(polygon1);
    lightingScene.addObject(polygon2);

    // Create and add lights
    // 1 light at [50, 50] with radius 100, strength 0.8 and colored white, 1 at [250, 250] with radius 150, strength 0.6 and colored white
    const light1 = new Light([50, 50], 100, 5, [255, 255, 255]);
    const light2 = new Light([250, 250], 150, 0.6, [255, 255, 255]);

    lightingScene.addLight(light1);
    lightingScene.addLight(light2);

    // Create a SceneManager and pass it the canvas and scene
    var manager = new SceneManager({
      canvas: lightingCanvas,
      initialScene: lightingScene,
    });
  </script>
</body>
</html>