add intersections to DomSyncerObject

Author: takuma-hmng8

app/domSyncer/DomSyncer.tsx

@@ -1,5 +1,5 @@
 import * as THREE from "three";
-import { useEffect, useLayoutEffect, useRef } from "react";
+import { useCallback, useEffect, useLayoutEffect, useRef } from "react";
 import { useFrame, extend, useThree, useLoader } from "@react-three/fiber";
 import { FxMaterial, FxMaterialProps } from "@/utils/fxMaterial";
 import {
@@ -50,6 +50,34 @@ export const DomSyncer = ({ state }: { state: number }) => {
       [state]
    );
 
+   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]);
+
    const domArr = useRef<(HTMLElement | Element)[]>([]);
    const contentArr = useRef<HTMLElement[]>([]);
 

app/domSyncer/page.tsx

@@ -97,6 +97,7 @@ export default function Page() {
                </>
             )}
          </div>
+         <div style={{ height: "200vh" }}></div>
       </>
    );
 }

packages/use-shader-fx/build/use-shader-fx.js

@@ -527,7 +527,7 @@ void main() {
 	alpha *= textureAlpha;
 
 	gl_FragColor = vec4(textureColor, alpha);
-}`;const tn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(u=>{u instanceof n.Mesh&&(u.geometry.dispose(),u.material.dispose())}),o.remove(...o.children)),t.texture.forEach((u,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:en,fragmentShader:nn,transparent:!0,uniforms:{u_texture:{value:u},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},rn=()=>{const t=a.useRef([]),s=a.useRef([]);return a.useCallback(({isIntersectingRef:u,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((v,r)=>{v.unobserve(s.current[r])}),s.current=[],t.current=[];const d=new Array(l.dom.length).fill(!1);u.current=[...d],e.current=[...d],l.dom.forEach((v,r)=>{const c=m=>{m.forEach(f=>{l.onIntersect[r]&&l.onIntersect[r](f),u.current[r]=f.isIntersecting})},p=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});p.observe(v),t.current.push(p),s.current.push(v)})},[])},on=()=>{const t=a.useRef([]),s=a.useCallback(({params:o,size:u,resolutionRef:e,scene:l,isIntersectingRef:d})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((v,r)=>{const c=o.dom[r];if(!c){k&&console.warn("DOM is null.");return}const p=c.getBoundingClientRect();if(t.current[r]=p,v.scale.set(p.width,p.height,1),v.position.set(p.left+p.width*.5-u.width*.5,-p.top-p.height*.5+u.height*.5,0),d.current[r]&&(o.rotation[r]&&v.rotation.copy(o.rotation[r]),v instanceof n.Mesh)){const m=v.material;i(m,"u_texture",o.texture[r]),i(m,"u_textureResolution",o.resolution[r]),i(m,"u_resolution",e.current.set(p.width,p.height)),i(m,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=a.useRef([]),s=a.useRef([]),o=a.useCallback((u,e=!1)=>{t.current.forEach((d,v)=>{d&&(s.current[v]=!0)});const l=e?[...s.current]:[...t.current];return u<0?l:l[u]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},Q={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},un=({size:t,dpr:s,samples:o=0},u=[])=>{const e=a.useMemo(()=>new n.Scene,[]),l=b(t),[d,v]=D({scene:e,camera:l,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[r,c]=C(Q),[p,m]=on(),f=a.useRef(new n.Vector2(0,0)),[g,h]=a.useState(!0);a.useEffect(()=>{h(!0)},u);const y=rn(),{isIntersectingOnceRef:S,isIntersectingRef:_,isIntersecting:T}=an();return[a.useCallback((E,B)=>{const{gl:R,size:M}=E;return B&&c(B),Qe(r)&&(g&&(tn({params:r,size:M,scene:e}),y({isIntersectingRef:_,isIntersectingOnceRef:S,params:r}),h(!1)),m({params:r,size:M,resolutionRef:f,scene:e,isIntersectingRef:_})),v(R)},[v,c,y,m,g,e,r,S,_]),c,{scene:e,camera:l,renderTarget:d,output:d.texture,isIntersecting:T,DOMRects:p}]};var sn=`precision mediump float;
+}`;const tn=({params:t,size:s,scene:o})=>{o.children.length>0&&(o.children.forEach(u=>{u instanceof n.Mesh&&(u.geometry.dispose(),u.material.dispose())}),o.remove(...o.children)),t.texture.forEach((u,e)=>{const l=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:en,fragmentShader:nn,transparent:!0,uniforms:{u_texture:{value:u},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[e]?t.boderRadius[e]:0}}}));o.add(l)})},rn=()=>{const t=a.useRef([]),s=a.useRef([]);return a.useCallback(({isIntersectingRef:u,isIntersectingOnceRef:e,params:l})=>{t.current.length>0&&t.current.forEach((v,r)=>{v.unobserve(s.current[r])}),s.current=[],t.current=[];const d=new Array(l.dom.length).fill(!1);u.current=[...d],e.current=[...d],l.dom.forEach((v,r)=>{const c=m=>{m.forEach(f=>{l.onIntersect[r]&&l.onIntersect[r](f),u.current[r]=f.isIntersecting})},p=new IntersectionObserver(c,{rootMargin:"0px",threshold:0});p.observe(v),t.current.push(p),s.current.push(v)})},[])},on=()=>{const t=a.useRef([]),s=a.useCallback(({params:o,size:u,resolutionRef:e,scene:l,isIntersectingRef:d})=>{l.children.length!==t.current.length&&(t.current=new Array(l.children.length)),l.children.forEach((v,r)=>{const c=o.dom[r];if(!c){k&&console.warn("DOM is null.");return}const p=c.getBoundingClientRect();if(t.current[r]=p,v.scale.set(p.width,p.height,1),v.position.set(p.left+p.width*.5-u.width*.5,-p.top-p.height*.5+u.height*.5,0),d.current[r]&&(o.rotation[r]&&v.rotation.copy(o.rotation[r]),v instanceof n.Mesh)){const m=v.material;i(m,"u_texture",o.texture[r]),i(m,"u_textureResolution",o.resolution[r]),i(m,"u_resolution",e.current.set(p.width,p.height)),i(m,"u_borderRadius",o.boderRadius[r]?o.boderRadius[r]:0)}})},[]);return[t.current,s]},an=()=>{const t=a.useRef([]),s=a.useRef([]),o=a.useCallback((u,e=!1)=>{t.current.forEach((d,v)=>{d&&(s.current[v]=!0)});const l=e?[...s.current]:[...t.current];return u<0?l:l[u]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:s,isIntersecting:o}},Q={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},un=({size:t,dpr:s,samples:o=0},u=[])=>{const e=a.useMemo(()=>new n.Scene,[]),l=b(t),[d,v]=D({scene:e,camera:l,size:t,dpr:s,samples:o,isSizeUpdate:!0}),[r,c]=C(Q),[p,m]=on(),f=a.useRef(new n.Vector2(0,0)),[g,h]=a.useState(!0);a.useEffect(()=>{h(!0)},u);const y=rn(),{isIntersectingOnceRef:S,isIntersectingRef:_,isIntersecting:T}=an();return[a.useCallback((E,B)=>{const{gl:R,size:M}=E;return B&&c(B),Qe(r)&&(g&&(tn({params:r,size:M,scene:e}),y({isIntersectingRef:_,isIntersectingOnceRef:S,params:r}),h(!1)),m({params:r,size:M,resolutionRef:f,scene:e,isIntersectingRef:_})),v(R)},[v,c,y,m,g,e,r,S,_]),c,{scene:e,camera:l,renderTarget:d,output:d.texture,isIntersecting:T,DOMRects:p,intersections:_.current}]};var sn=`precision mediump float;
 
 varying vec2 vUv;
 

packages/use-shader-fx/build/use-shader-fx.js.map

@@ -1,6 +1,6 @@
 {
    "name": "@hmng8/use-shader-fx",
-   "version": "1.0.40",
+   "version": "1.0.41",
    "description": "The only difficult part is coding the shaders",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

packages/use-shader-fx/build/use-shader-fx.umd.cjs

@@ -38,8 +38,10 @@ export type DomSyncerObject = {
     * @param once - If set to true, it will continue to return true once crossed.
     */
    isIntersecting: IsIntersecting;
-   /** Returns the target's DOMRect[] */
+   /** target's DOMRect[] */
    DOMRects: DOMRect[];
+   /** target's intersetions boolean[] */
+   intersections: boolean[];
 };
 
 export const DOMSYNCER_PARAMS: DomSyncerParams = {
@@ -143,6 +145,7 @@ export const useDomSyncer = (
          output: renderTarget.texture,
          isIntersecting: isIntersecting,
          DOMRects: DOMRects,
+         intersections: isIntersectingRef.current,
       },
    ];
 };

packages/use-shader-fx/build/use-shader-fx.umd.cjs.map

@@ -28,8 +28,10 @@ export type DomSyncerObject = {
      * @param once - If set to true, it will continue to return true once crossed.
      */
     isIntersecting: IsIntersecting;
-    /** Returns the target's DOMRect[] */
+    /** target's DOMRect[] */
     DOMRects: DOMRect[];
+    /** target's intersetions boolean[] */
+    intersections: boolean[];
 };
 export declare const DOMSYNCER_PARAMS: DomSyncerParams;
 /**