Merge pull request #70 from takuma-hmng8/dev

Bug fix regarding updateKey in useDomSyncer

Author: takuma-hmng8

README.md

@@ -368,8 +368,7 @@ The second argument contains the dependency array that updates the DOM. For exam
 ```tsx
 const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(
    { size, dpr },
-   [state],
-   state
+   [state]
 );
 
 useLayoutEffect(() => {
@@ -379,8 +378,8 @@ useLayoutEffect(() => {
       domArr.current = [...document.querySelectorAll(".item2")!];
    }
    setDomSyncer({
-      // Since DOM rendering and React updates are asynchronous, the DOM may not be retrieved correctly when the state is updated. In that case, use another logic to get the DOM perfectly before updating updateKey.
-      updateKey: state,
+      // Because DOM rendering and React updates occur asynchronously, there may be a lag between updating dependent arrays and setting DOM arrays. That's what the Key is for. If the dependent array is updated but the Key is not, the loop will skip and return an empty texture. By updating the timing key when DOM acquisition is complete, you can perfectly synchronize DOM and Mesh updates.updateKey must be a unique value for each update, for example `performance.now()
+      updateKey: performance.now(),
       dom: domArr.current,
       boderRadius: [...Array(domArr.current.length)].map((_, i) => i * 50.0),
       onIntersect: [...Array(domArr.current.length)].map((_, i) => (entry) => {

app/domSyncer/DomSyncer.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
+import { useEffect, useLayoutEffect, useRef } from "react";
 import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
 import {
@@ -47,8 +47,7 @@ export const DomSyncer = ({ state }: { state: number }) => {
 
    const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(
       { size, dpr },
-      [state],
-      state
+      [state]
    );
 
    const { setFrameloop } = useThree();
@@ -86,7 +85,7 @@ export const DomSyncer = ({ state }: { state: number }) => {
 
       setDomSyncer({
          dom: domArr.current,
-         updateKey: state,
+         updateKey: performance.now(),
          boderRadius: [...Array(domArr.current.length)].map((_, i) => i * 50.0),
          rotation: [...Array(domArr.current.length)].map(
             (_, i) => new THREE.Euler(0.0, 0.0, i * 0.1)