Initial commit

2026-10-18 07:40:38 +00:00 · 2025-05-23 08:52:14 -07:00
commit 3332f609a9
129 changed files with 64575 additions and 0 deletions
@@ -0,0 +1,121 @@
+<!DOCTYPE html>
+
+<head>
+  <meta charset="utf-8">
+  <title>Forge • Carousel</title>
+  <style>
+    body {
+      margin: 0;
+    }
+  </style>
+</head>
+
+<body>
+  <script type="importmap">
+    {
+      "imports": {
+        "three": "/examples/js/vendor/three/build/three.module.js",
+        "@forge-gfx/forge": "/dist/forge.module.js"
+      }
+    }
+  </script>
+  <script type="module">
+    import * as THREE from "three";
+    import { SplatMesh } from "@forge-gfx/forge";
+    import { getAssetFileURL } from "/examples/js/get-asset-url.js";
+    import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
+    const renderer = new THREE.WebGLRenderer();
+    renderer.setClearColor(0x000000, 1);
+    renderer.setSize(window.innerWidth, window.innerHeight);
+    document.body.appendChild(renderer.domElement);
+
+    // Setup mouse controls to orbit the camera around
+    const controls = new OrbitControls(camera, renderer.domElement);
+    controls.target.set(0, 0, -3);
+    controls.minDistance = 2;
+    controls.maxDistance = 3;
+    controls.enablePan = false;
+    controls.enabled = true;
+    controls.update();
+
+    const ASSETS = [
+      { file: "butterfly.spz", scale: 1.2 },
+      { file: "furry.spz", scale: 0.45 },
+      { file: "forge.spz", scale: 1 },
+    ];
+    const assets = [];
+
+    const pedestalURL = await getAssetFileURL("pedestal.spz");
+    const pedestalSplat = new SplatMesh({ url: pedestalURL });
+    pedestalSplat.scale.set(0.4, 0.4, 0.4);
+    pedestalSplat.position.set(0, -2.25, -3);
+    pedestalSplat.opacity = 0.0;
+    scene.add(pedestalSplat);
+
+    for (let asset of ASSETS) {
+      const splatURL = await getAssetFileURL(asset.file);
+      const splat = new SplatMesh({ url: splatURL });
+      splat.quaternion.set(1, 0, 0, 0);
+      splat.position.set(0, 0, -3);
+      splat.scale.setScalar(asset.scale);
+      assets.push(splat);
+    }
+
+    let current = 0;
+    scene.add(assets[current]);
+
+    const FADE_TIME = 1000; //ms
+    let fadeOut = null;
+    let fadeIn = null;
+
+    let prevTime;
+
+    renderer.setAnimationLoop(function animate(time) {
+      const dt = time - (prevTime ?? time);
+      prevTime = time;
+
+      renderer.render(scene, camera);
+      assets[current].rotation.y = time / 1500;
+      controls.update();
+
+      // fade out
+      if (fadeOut !== null) {
+        fadeOut += dt;
+
+        if (fadeOut < FADE_TIME) {
+          assets[current].opacity = 1 - easeInOutSine(fadeOut / FADE_TIME);
+        } else {
+          fadeOut = null;
+          fadeIn = 0;
+          scene.remove(assets[current]);
+          current = (current + 1) % assets.length;
+          scene.add(assets[current]);
+        }
+      }
+
+      // fade in
+      if (fadeIn !== null) {
+        fadeIn += dt;
+        pedestalSplat.opacity = ASSETS[current].file === "furry.spz" ? 1 : 0;
+        if (fadeIn < FADE_TIME) {
+          assets[current].opacity = easeInOutSine(fadeIn / FADE_TIME);
+        } else {
+          fadeIn = null;
+        }
+      }
+
+    });
+
+    // start fadeout every x seconds
+    setInterval(() => { fadeOut = 0 }, 5000);
+
+    function easeInOutSine(x) {
+      return -(Math.cos(Math.PI * x) - 1) / 2;
+    }
+  </script>
+</body>
+
+</html>