v1.1.31

Author: takuma-hmng8

app/stickers/CanvasState.ts

@@ -1,4 +1,6 @@
 import * as THREE from "three";
+import { CLICKED_WOBBLE_STRENGTH } from "./StickerBall";
+import { STICKER_TEXTURES_LENGTH } from "./useStickers";
 
 export class CanvasState {
    private static instance: CanvasState;
@@ -9,24 +11,30 @@ export class CanvasState {
       }
       return CanvasState.instance;
    }
-   private STICKERSIZE = {
+
+   private STICKER_SIZE = {
       min: 0.04,
       max: 0.08,
    };
+
+   public CAMERA_Z = {
+      zoom: 3.5,
+      default: 4,
+   };
+
    private getRandomSize() {
       return (
-         Math.random() * (this.STICKERSIZE.max - this.STICKERSIZE.min) +
-         this.STICKERSIZE.min
+         Math.random() * (this.STICKER_SIZE.max - this.STICKER_SIZE.min) +
+         this.STICKER_SIZE.min
       );
    }
    private getRandomAngle() {
       return Math.random() * Math.PI * 2;
    }
-
    private getNextStickerIndex() {
       const prevIndex = this.stickerState.nextStickerIndex;
       let nextIndex;
-      // 重複しないように次のステッカーを選ぶ
+      // Select the next sticker to avoid duplication.
       do {
          nextIndex = Math.floor(Math.random() * this.textures.stickers.length);
       } while (nextIndex === prevIndex);
@@ -49,7 +57,11 @@ export class CanvasState {
    public cameraState: {
       point: THREE.Vector3;
    } = {
-      point: new THREE.Vector3(0, 0, 4),
+      point: new THREE.Vector3(0, 0, this.CAMERA_Z.default),
+   };
+
+   public clockState = {
+      waiting: 0,
    };
 
    public stickerState: {
@@ -68,7 +80,7 @@ export class CanvasState {
       wobbleStrength: 0,
       point: new THREE.Vector2(0, 0),
       sticker: null,
-      nextStickerIndex: 0,
+      nextStickerIndex: Math.floor(Math.random() * STICKER_TEXTURES_LENGTH),
       wrinkle: null,
       wrinkleIntensity: Math.random(),
       size: this.getRandomSize(),
@@ -79,7 +91,7 @@ export class CanvasState {
    public setStickerState(point: THREE.Vector2) {
       this.stickerState = {
          isNotSticked: false,
-         wobbleStrength: 0.4,
+         wobbleStrength: CLICKED_WOBBLE_STRENGTH,
          point: point,
          sticker: this.textures.stickers[this.stickerState.nextStickerIndex],
          nextStickerIndex: this.getNextStickerIndex(),
@@ -90,7 +102,7 @@ export class CanvasState {
          wrinkleIntensity: Math.random(),
          size: this.getRandomSize(),
          angle: this.getRandomAngle(),
-         count: this.stickerState.count + 2,
+         count: this.stickerState.count + 2, // To swap FBOs
       };
    }
 }

app/stickers/CursorUI/index.tsx

@@ -7,15 +7,16 @@ import { useFrame } from "@react-three/fiber";
 import { useStickers } from "./useStickers";
 import { CanvasState } from "./CanvasState";
 import { StickerBall } from "./StickerBall";
+import { Easing, Utils } from "@/packages/use-shader-fx/src";
 
 const Background = memo(({ stickerMap }: { stickerMap: THREE.Texture }) => {
    return (
       <>
          <Environment preset="warehouse" environmentIntensity={0.5} />
          <mesh scale={100}>
-            <sphereGeometry args={[2, 64, 64]} />
+            <sphereGeometry args={[3, 32, 32]} />
             <meshBasicMaterial
-               color={new THREE.Color(0x333333)}
+               color={new THREE.Color(0x444444)}
                map={stickerMap}
                side={THREE.BackSide}
             />
@@ -30,15 +31,34 @@ export const Playground = () => {
 
    const canvasState = CanvasState.getInstance();
 
-   useFrame(({ camera }, delta) => {
+   useFrame(({ camera, clock }, delta) => {
       if (!isReady) {
          return;
       }
-      if (canvasState.cameraState.point.z < 4) {
+
+      // control camera state
+      if (canvasState.cameraState.point.z < canvasState.CAMERA_Z.default) {
          canvasState.cameraState.point.z += delta;
       }
       camera.position.lerp(canvasState.cameraState.point, 0.16);
       camera.lookAt(0, 0, 0);
+
+      // control clock state
+      if (canvasState.stickerState.isNotSticked) {
+         const eased = Easing.easeOutSine(
+            Math.sin(clock.getElapsedTime() * 3.5) * 0.5 + 0.5
+         );
+         canvasState.clockState.waiting = Utils.interpolate(
+            canvasState.clockState.waiting,
+            eased,
+            0.1
+         );
+      } else if (canvasState.clockState.waiting > 0) {
+         canvasState.clockState.waiting =
+            canvasState.clockState.waiting > 0.001
+               ? Utils.interpolate(canvasState.clockState.waiting, 0, 0.16)
+               : 0;
+      }
    });
    return (
       <mesh visible={isReady}>