move textured-sprites-r3f example to lookbook

Author: spearwolf

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

@@ -20,10 +20,10 @@ export class BouncingSprites {
     this.containerHeight = height;
     this.spriteSize = spriteSize;
 
-    console.log("new BouncingSprites()", { width, height, spriteSize });
+    console.log('new BouncingSprites()', {width, height, spriteSize});
   }
 
-  init({ geometry, atlas, capacity }) {
+  init({geometry, atlas, capacity}) {
     this.spritePool = geometry.instancedPool;
     this.textureAtlas = atlas;
     this.initalSpriteCount = capacity;
@@ -34,48 +34,41 @@ export class BouncingSprites {
 
     this.createSprites();
 
-    console.log("bouncingSprites.init()", this);
+    console.log('bouncingSprites.init()', this);
   }
 
   createSprites(count = this.initalSpriteCount) {
-    const [halfWidth, halfHeight] = [
-      this.containerWidth / 2,
-      this.containerHeight / 2,
-    ];
+    const [halfWidth, halfHeight] = [this.containerWidth / 2, this.containerHeight / 2];
 
     for (let i = 0; i < count; i++) {
       const sprite = this.spritePool.createVO();
 
       sprite.setSize(this.spriteSize, this.spriteSize);
 
-      sprite.setPosition(
-        Math.random() * this.containerWidth - halfWidth,
-        Math.random() * this.containerHeight - halfHeight
-      );
+      sprite.setPosition(Math.random() * this.containerWidth - halfWidth, Math.random() * this.containerHeight - halfHeight);
 
       sprite.setFrame(
         // this.frames ? sample(this.frames) : this.textureAtlas.randomFrame()
-        this.textureAtlas.randomFrame()
+        this.textureAtlas.randomFrame(),
       );
 
       sprite.speedX = Math.random() * this.startSpeedX + this.startSpeedBaseX;
-      sprite.speedY =
-        Math.random() * this.startSpeedY -
-        this.startSpeedY / 2 +
-        this.startSpeedBaseY;
+      sprite.speedY = Math.random() * this.startSpeedY - this.startSpeedY / 2 + this.startSpeedBaseY;
 
       sprite.rotation = Math.random() * Math.PI * 2;
       sprite.speedRotate = Math.random() * Math.PI * this.speedRotateFactor;
 
+      sprite.setColor([1, 1, 1, 1]);
+
       this.sprites.push(sprite);
     }
   }
 
   update(args) {
-    console.log("update", args);
+    console.log('update', args);
   }
 
-  frame({ delta }) {
+  frame({delta}) {
     const deltaFactor = delta;
 
     const gravity = this.gravity * deltaFactor;
@@ -85,7 +78,7 @@ export class BouncingSprites {
     this.sprites.forEach((sprite) => {
       sprite.rotation += sprite.speedRotate * deltaFactor;
 
-      let { x, y, speedX, speedY } = sprite;
+      let {x, y, speedX, speedY} = sprite;
 
       x += speedX * deltaFactor;
       y += speedY * deltaFactor;
@@ -111,9 +104,7 @@ export class BouncingSprites {
         }
       } else if (y < -halfHeight) {
         // on the bottom edge
-        speedY =
-          Math.random() * this.upwindSpeed * this.containerHeight +
-          this.upwindBaseSpeed * this.containerHeight;
+        speedY = Math.random() * this.upwindSpeed * this.containerHeight + this.upwindBaseSpeed * this.containerHeight;
         y = -halfHeight;
       }
 

examples/r3f/src/textured-sprites/BouncingSprites.js renamed to apps/lookbook/src/components/demos/textured-sprites-r3f/BouncingSprites.js

@@ -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,
@@ -13,21 +13,24 @@ import {
   TextureRef,
   useFrameLoop,
   useTextureAtlas,
-} from "twopoint5d-r3f";
-import { useEffect, useRef, useState } from "react";
-import { FilmPass } from "three/examples/jsm/postprocessing/FilmPass";
-import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
+} from '@spearwolf/twopoint5d-r3f';
+import {useEffect, useRef, useState} from 'react';
 
-import { LogStageSizeToConsole } from "../utils/LogStageSizeToConsole";
-import { WiredBox } from "../utils/WiredBox";
-import { BouncingSprites } from "./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 {WiredBox} from '../WiredBox.tsx';
+import {BouncingSprites} from './BouncingSprites.js';
+import {LogStageSizeToConsole} from './LogStageSizeToConsole.jsx';
+
+extend({RenderPass, FilmPass});
+
+export function DemoOrDie({capacity}) {
   const geometry = useRef();
 
-  const atlas = useTextureAtlas("atlas0");
+  const atlas = useTextureAtlas('atlas0');
 
   const [tick, setTick] = useState(0);
   const [tack, setTack] = useState(null);
@@ -44,17 +47,17 @@ export const DemoOrDie = ({ capacity }) => {
     if (tick < 5) {
       setTimeout(() => setTick(tick + 1), 1000);
     } else {
-      setTack({ isTack: true });
+      setTack({isTack: true});
     }
   }, [tick]);
 
   return (
     <>
       <TextureAtlas
         name="atlas0"
-        url="/examples/assets/lab-walls-tiles.json"
+        url={assetsUrl('lab-walls-tiles.json')}
         nearest
-        overrideImageUrl="/examples/assets/lab-walls-tiles.png"
+        overrideImageUrl={assetsUrl('lab-walls-tiles.png')}
       />
 
       <Stage2D name="stage0" noAutoRender noAutoClear>
@@ -66,40 +69,27 @@ export const DemoOrDie = ({ capacity }) => {
       </Stage2D>
 
       <Stage2D name="stage1" noAutoRender noAutoClear defaultCamera>
-        <ParallaxProjection
-          plane="xy"
-          origin="bottom left"
-          width={150}
-          height={150}
-          fit="contain"
-        />
+        <ParallaxProjection plane="xy" origin="bottom left" width={150} height={150} fit="contain" />
 
         <LogStageSizeToConsole />
 
         <TexturedSprites>
-          <TexturedSpritesGeometry
-            capacity={capacity}
-            ref={geometry}
-          ></TexturedSpritesGeometry>
+          <TexturedSpritesGeometry capacity={capacity} ref={geometry}></TexturedSpritesGeometry>
           <TexturedSpritesMaterial depthTest={false} depthWrite={false}>
             <TextureRef name="atlas0" attach="colorMap" />
           </TexturedSpritesMaterial>
         </TexturedSprites>
       </Stage2D>
 
-      <GetStage2D name={["stage0", "stage1"]}>
+      <GetStage2D name={['stage0', 'stage1']}>
         {(stage0, stage1) => (
           <Effects disableRenderPass={true}>
             <renderPass args={[stage0.scene, stage0.camera]} />
-            <renderPass
-              clear={false}
-              clearDepth={true}
-              args={[stage1.scene, stage1.camera, undefined, false, false]}
-            />
+            <renderPass clear={false} clearDepth={true} args={[stage1.scene, stage1.camera, undefined, false, false]} />
             <filmPass args={[1, 0.5, 10, 0]} />
           </Effects>
         )}
       </GetStage2D>
     </>
   );
-};
+}

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

@@ -0,0 +1,12 @@
+import {Stage2DContext, useStageResize} from '@spearwolf/twopoint5d-r3f';
+import {useContext} from 'react';
+
+export function LogStageSizeToConsole() {
+  const stage = useContext(Stage2DContext);
+
+  useStageResize((width, height) => {
+    console.log(`stage[${stage?.name}] size is`, width, height);
+  });
+
+  return null;
+}

apps/lookbook/src/components/demos/textured-sprites-r3f/LogStageSizeToConsole.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-r3f/index.jsx

@@ -2,6 +2,6 @@
   "title": "textured quads from texture atlas",
   "description": "Render instanced quads with textures from a textures-atlas",
   "url": "/demos/textured-quads-from-texture-atlas",
-  "tags": ["TextureAtlas", "TextureAtlasLoader", "VertexObjects", "instanced", "textures", "vanilla"],
+  "tags": ["TextureAtlas", "TextureAtlasLoader", "VertexObjects", "instanced", "texture-atlas", "textures", "vanilla"],
   "previewImage": "textured-quads-from-texture-atlas.png"
 }

apps/lookbook/src/pages/demos/_textured-quads-from-texture-atlas.json

@@ -0,0 +1,22 @@
+{
+  "title": "textured sprites (r3f)",
+  "description": "Sprites loaded from a texture atlas with post processing example",
+  "url": "/demos/textured-sprites-r3f",
+  "tags": [
+    "<GetStage2D/>",
+    "<ParallaxProjection/>",
+    "<Stage2D/>",
+    "<TextureAtlas/>",
+    "<TexturedSprites/>",
+    "<TexturedSpritesGeometry/>",
+    "<TexturedSpritesMaterial/>",
+    "<TextureRef/>",
+    "useFrameLoop",
+    "useTextureAtlas",
+    "texture-atlas",
+    "textures",
+    "react",
+    "r3f"
+  ],
+  "previewImage": "textured-sprites-r3f.png"
+}

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

@@ -0,0 +1,20 @@
+---
+import DemoOrDie from '~components/demos/textured-sprites-r3f/index.jsx';
+import Layout from '~layouts/ReactDemo.astro';
+import {title} from './_textured-sprites-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>

apps/lookbook/src/pages/demos/textured-sprites-r3f.astro

@@ -1,4 +1,4 @@
-import {useEffect, useLayoutEffect, useRef} from 'react';
+import {useEffect, useRef} from 'react';
 import {useStageSize} from './useStageSize.js';
 
 export type ResizeEffectCallback = (width: number, height: number) => any;
@@ -15,7 +15,7 @@ export const useStageResize = (resizeEffect: ResizeEffectCallback): void => {
   const callbackRef = useRef<ResizeEffectCallback>();
   const [width, height] = useStageSize();
 
-  useLayoutEffect(() => void (callbackRef.current = resizeEffect), [resizeEffect]);
+  callbackRef.current = resizeEffect;
 
   useEffect(() => {
     if (callbackRef.current) {

examples/r3f/public/textured-sprites.html

@@ -1,4 +1,5 @@
 import {Stage2D} from '@spearwolf/twopoint5d';
+import {StageResize} from '@spearwolf/twopoint5d/events.js';
 import {useContext, useEffect, useState} from 'react';
 import {Stage2DContext} from '../components/Stage2D.js';
 
@@ -26,8 +27,8 @@ export function useStageSize() {
     if (parentStage) {
       updateSize(parentStage.width, parentStage.height);
 
-      return parentStage.on('resize', (stage: Stage2D) => {
-        updateSize(stage.width, stage.height);
+      return parentStage.on(StageResize, ({width, height}: Stage2D) => {
+        updateSize(width, height);
       });
     }
   }, [parentStage]);