move textured-sprites-from-tileset-r3f example to lookbook

Author: spearwolf

apps/lookbook/public/images/demo-preview/textured-sprites-from-tileset-r3f.png

@@ -1,5 +1,5 @@
-import { Effects } from "@react-three/drei";
-import { extend } from "@react-three/fiber";
+import {Effects} from '@react-three/drei';
+import {extend} from '@react-three/fiber';
 import {
   forwardRefValue,
   GetStage2D,
@@ -12,19 +12,22 @@ import {
   TileSet,
   useFrameLoop,
   useTextureAtlas,
-} from "twopoint5d-r3f";
-import { useRef } from "react";
-import { FilmPass } from "three/examples/jsm/postprocessing/FilmPass";
-import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
+} from '@spearwolf/twopoint5d-r3f';
+import {useRef} from 'react';
 
-import { BouncingSprites } from "../textured-sprites/BouncingSprites";
+import {FilmPass} from 'three/examples/jsm/postprocessing/FilmPass';
+import {RenderPass} from 'three/examples/jsm/postprocessing/RenderPass';
 
-extend({ RenderPass, FilmPass });
+import assetsUrl from '~demos/utils/assetsUrl.ts';
 
-export const DemoOrDie = ({ capacity }) => {
+import {BouncingSprites} from '../textured-sprites-r3f/BouncingSprites.js';
+
+extend({RenderPass, FilmPass});
+
+export const DemoOrDie = ({capacity}) => {
   const geometry = useRef();
 
-  const atlas = useTextureAtlas("tiles");
+  const atlas = useTextureAtlas('tiles');
 
   useFrameLoop(() => new BouncingSprites(150, 75, 5), {
     geometry: forwardRefValue(geometry),
@@ -34,22 +37,13 @@ export const DemoOrDie = ({ capacity }) => {
 
   return (
     <>
-      <TileSet
-        name="tiles"
-        url="/examples/assets/nobinger-anim-sheet.png"
-        tileWidth={64}
-        tileHeight={64}
-        margin={1}
-      />
+      <TileSet name="tiles" url={assetsUrl('nobinger-anim-sheet.png')} tileWidth={64} tileHeight={64} margin={1} />
 
       <Stage2D name="stage1" noAutoRender defaultCamera>
         <ParallaxProjection plane="xy" origin="bottom left" pixelZoom={4} />
 
         <TexturedSprites>
-          <TexturedSpritesGeometry
-            capacity={capacity}
-            ref={geometry}
-          ></TexturedSpritesGeometry>
+          <TexturedSpritesGeometry capacity={capacity} ref={geometry}></TexturedSpritesGeometry>
           <TexturedSpritesMaterial depthTest={false} depthWrite={false}>
             <TextureRef name="tiles" attach="colorMap" />
           </TexturedSpritesMaterial>

examples/r3f/src/textured-sprites-from-tileset/textured-sprites-from-tileset.jsx renamed to apps/lookbook/src/components/demos/textured-sprites-from-tileset-r3f/DemoOrDie.jsx

@@ -0,0 +1,15 @@
+import {OrbitControls} from '@react-three/drei';
+import {Canvas} from '@react-three/fiber';
+import {StrictMode} from 'react';
+import {DemoOrDie} from './DemoOrDie.jsx';
+
+export default function main() {
+  return (
+    <Canvas linear flat dpr={[1, 2]} camera={{position: [0, 0, 50]}}>
+      <StrictMode>
+        <DemoOrDie capacity={500} />
+        <OrbitControls />
+      </StrictMode>
+    </Canvas>
+  );
+}

apps/lookbook/src/components/demos/textured-sprites-from-tileset-r3f/index.jsx

@@ -1,6 +1,6 @@
 {
   "title": "animated billboards",
-  "description": "A demo showing animated billboards in 3d",
+  "description": "Animated billboards dancing in a 3D environment",
   "url": "/demos/animated-billboards",
   "tags": [
     "AnimatedSprites",

apps/lookbook/src/pages/demos/_animated-billboards.json

@@ -1,6 +1,6 @@
 {
   "title": "animated sprites",
-  "description": "A demo showing 2d sprites in 3d with frame based animations",
+  "description": "Textured sprites with frame based animations",
   "url": "/demos/animated-sprites",
   "tags": [
     "AnimatedSprites",

apps/lookbook/src/pages/demos/_animated-sprites.json

@@ -0,0 +1,22 @@
+{
+  "title": "textured sprites from tileset (r3f)",
+  "description": "Render textured sprites from tileset image",
+  "url": "/demos/textured-sprites-from-tileset-r3f",
+  "tags": [
+    "<GetStage2D/>",
+    "<ParallaxProjection/>",
+    "<Stage2D/>",
+    "<TexturedSprites/>",
+    "<TexturedSpritesGeometry/>",
+    "<TexturedSpritesMaterial/>",
+    "<TextureRef/>",
+    "<TileSet/>",
+    "useFrameLoop",
+    "useTextureAtlas",
+    "tilesets",
+    "textures",
+    "react",
+    "r3f"
+  ],
+  "previewImage": "textured-sprites-from-tileset-r3f.png"
+}

apps/lookbook/src/pages/demos/_textured-sprites-from-tileset-r3f.json

@@ -0,0 +1,20 @@
+---
+import DemoOrDie from '~components/demos/textured-sprites-from-tileset-r3f/index.jsx';
+import Layout from '~layouts/ReactDemo.astro';
+import {title} from './_textured-sprites-from-tileset-r3f.json';
+---
+
+<Layout title={title}>
+  <DemoOrDie client:only />
+</Layout>
+
+<style>
+  body {
+    margin: 0;
+    height: 100vh;
+    overflow-y: hidden;
+    background-color: rgb(100, 118, 136);
+    background: radial-gradient(circle, rgb(231, 231, 231) 0%, rgb(107, 122, 107) 100%);
+    color: #eee;
+  }
+</style>