Add panorama previews and repair beta export rendering

renderer/scene.js

@@ -1,5 +1,6 @@
 import * as THREE from "/three.js";
 import { buildTerrain } from "./terrain-mesh.js";
+import { firstTextureFrame } from "./block-colors.mjs";
 // This renderer consumes snapshots, never connects to a Minecraft server.
 const renderer = new THREE.WebGLRenderer({
   antialias: true,
@@ -70,7 +71,39 @@ async function texture(ref) {
       ref,
       loader
         .loadAsync(resourcePath(ref, "textures") + ".png")
-        .then((t) => {
+        .then(async (t) => {
+          // Vanilla animated textures are sprite sheets, not stretched faces.
+          const metadata =
+            t.image.width !== t.image.height
+              ? await fetch(resourcePath(ref, "textures") + ".png.mcmeta").then(
+                  (r) => (r.ok ? r.json() : null),
+                )
+              : null;
+          if (metadata?.animation) {
+            const frame = firstTextureFrame(
+              t.image.width,
+              t.image.height,
+              metadata.animation,
+            );
+            const canvas = document.createElement("canvas");
+            canvas.width = frame.width;
+            canvas.height = frame.height;
+            canvas
+              .getContext("2d")
+              .drawImage(
+                t.image,
+                frame.x,
+                frame.y,
+                frame.width,
+                frame.height,
+                0,
+                0,
+                frame.width,
+                frame.height,
+              );
+            t.image = canvas;
+            t.needsUpdate = true;
+          }
           t.magFilter = THREE.NearestFilter;
           t.minFilter = THREE.NearestFilter;
           t.colorSpace = THREE.SRGBColorSpace;