Dev

app/ShaderFx.tsx

@@ -16,7 +16,7 @@ export const ShaderFx = ({ children }: { children: React.ReactNode }) => {
                setDpr(Math.round((0.5 + 1.0 * factor) * 10) / 10);
             }}>
             <Suspense fallback={null}>{children}</Suspense>
-            {/* <Perf position={"bottom-left"} minimal={false} /> */}
+            <Perf position={"bottom-left"} minimal={false} />
          </PerformanceMonitor>
       </Canvas>
    );

app/domSyncer/DomSyncer.tsx

@@ -51,32 +51,16 @@ export const DomSyncer = ({ state }: { state: number }) => {
    );
 
    const { setFrameloop } = useThree();
-   const isPlaying = useRef<boolean>(true);
-
-   useEffect(() => {
-      let id: number;
-      const filterIntersection = () => {
-         if (domSyncerObj.intersections.some((item) => item)) {
-            // どっかには交差してる
-            if (!isPlaying.current) {
-               setFrameloop("always");
-               isPlaying.current = true;
-            }
-         } else {
-            // どこにも交差してない
-            if (isPlaying.current) {
-               setFrameloop("never");
-               isPlaying.current = false;
-            }
-         }
-
-         id = requestAnimationFrame(filterIntersection);
-      };
-      id = requestAnimationFrame(filterIntersection);
-      return () => {
-         cancelAnimationFrame(id);
-      };
-   }, [domSyncerObj.intersections, setFrameloop]);
+   domSyncerObj.useDomView({
+      onView: () => {
+         console.log("play");
+         setFrameloop("always");
+      },
+      onHidden: () => {
+         console.log("stop");
+         setFrameloop("never");
+      },
+   });
 
    const domArr = useRef<(HTMLElement | Element)[]>([]);
    const contentArr = useRef<HTMLElement[]>([]);