yawn/server/examples/basic.html

<!doctype html>
<!-- The host serving this page must send COOP: same-origin and COEP: require-corp headers. -->
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Yawn CDN example</title>
    <style>
      body {
        margin: 0;
        min-height: 100vh;
        display: grid;
        place-items: center;
        color: #15304a;
        background: #f4faff;
        font:
          16px/1.5 system-ui,
          sans-serif;
      }
      main {
        width: min(720px, calc(100% - 32px));
      }
      canvas {
        width: 100%;
        aspect-ratio: 16 / 9;
        display: block;
        background: white;
      }
      #status {
        margin: 12px 0 0;
      }
    </style>
    <script type="importmap">
      {
        "imports": {
          "@yawn/core": "https://yawn.heaust.org/pkg/core.js",
          "@yawn/handles": "https://yawn.heaust.org/pkg/handles.js"
        }
      }
    </script>
  </head>
  <body>
    <main>
      <canvas id="view" width="1280" height="720"></canvas>
      <p id="status">Starting Yawn…</p>
    </main>

    <script type="module">
      import { YawnCore } from "@yawn/core";
      import { Mesh, PBRMaterial, Scene } from "@yawn/handles";

      const canvas = document.querySelector("#view");
      const status = document.querySelector("#status");
      const scene = new Scene(canvas, { hdr: true, fps: 60 });
      await scene.ready;

      if (!(scene.core instanceof YawnCore)) {
        throw new Error(
          "Handles did not use the separately imported Core module.",
        );
      }

      const material = new PBRMaterial(scene, {
        baseColor: [0.12, 0.58, 1, 1],
        metallic: 0.15,
        roughness: 0.35,
      });
      await material.ready;

      const triangle = new Mesh(scene, {
        material,
        vertexData: {
          positions: [-0.72, -0.62, 0, 0.72, -0.62, 0, 0, 0.76, 0],
          normals: [0, 0, 1, 0, 0, 1, 0, 0, 1],
          indices: [0, 1, 2],
        },
      });
      await triangle.ready;

      status.textContent = "Scene ready — Core and Handles loaded separately.";
      document.documentElement.dataset.ready = "true";
    </script>
  </body>
</html>