resize対応

README.md

@@ -8,5 +8,6 @@
    -  流体的なエフェクト
 -  GUI
    -  gui で nois テクスチャー変えられるようにする
--  resize,ロード
+-  ~~resize~~
+-  ロード制御
 -  デュオトーン

app/DistortionCarousel/Distortion.tsx

@@ -1,14 +1,15 @@
 import * as THREE from "three";
 import { Canvas, useFrame, ThreeElements, useLoader } from "@react-three/fiber";
+import { useWindowResizeObserver } from "@funtech-inc/spice";
 import vertexShader from "./shader/main.vert";
 import fragmentSahder from "./shader/main.frag";
 import { memo, useEffect, useMemo, useRef } from "react";
 import { GUIController } from "./gui";
 
 //背景テクスチャーのアスペクト比
 const TEXTURE_RATIO = {
-   x: 492,
-   y: 390,
+   x: 512,
+   y: 512,
 };
 
 //GUIで操作するために関数外に出してる
@@ -43,6 +44,20 @@ export const Distortion = () => {
       }
    });
 
+   //window resize
+   useWindowResizeObserver({
+      callback: ({ winW, winH }) => {
+         if (ref.current?.uniforms) {
+            ref.current.uniforms.u_resolution.value = new THREE.Vector2(
+               winW,
+               winH
+            );
+         }
+      },
+      debounce: 50,
+      dependencies: [],
+   });
+
    return (
       <mesh>
          <planeGeometry args={[2, 2]} />

package.json

@@ -9,6 +9,7 @@
       "lint": "next lint"
    },
    "dependencies": {
+      "@funtech-inc/spice": "^1.1.17",
       "@react-three/fiber": "^8.13.7",
       "@types/node": "20.5.6",
       "@types/react": "18.2.21",