domSyncerにrotationを追加

Author: takuma-hmng8

app/domSyncer/DomSyncer.tsx

@@ -62,6 +62,9 @@ export const DomSyncer = ({ state }: { state: number }) => {
       setDomSyncer({
          dom: domArr.current,
          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)
+         ),
          onIntersect: [...Array(domArr.current.length)].map(
             (_, i) => (entry) => {
                if (

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

@@ -496,7 +496,7 @@ void main() {
 	alpha *= textureAlpha;
 
 	gl_FragColor = vec4(textureColor, alpha);
-}`;const Je=({params:n,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof t.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),n.texture.forEach((e,o)=>{const s=new t.Mesh(new t.PlaneGeometry(1,1),new t.ShaderMaterial({vertexShader:Ye,fragmentShader:qe,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new t.Vector2(0,0)},u_resolution:{value:new t.Vector2(0,0)},u_borderRadius:{value:n.boderRadius[o]?n.boderRadius[o]:0}}}));r.add(s)})},Ke=()=>{const n=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:o,params:s})=>{n.current.length>0&&n.current.forEach((a,l)=>{a.unobserve(i.current[l])}),i.current=[],n.current=[];const c=new Array(s.dom.length).fill(!1);e.current=[...c],o.current=[...c],s.dom.forEach((a,l)=>{const d=m=>{m.forEach(g=>{s.onIntersect[l]&&s.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(a),n.current.push(f),i.current.push(a)})},[])},Ze=({params:n,size:i,resolutionRef:r,scene:e,isIntersectingRef:o})=>{e.children.forEach((s,c)=>{const a=n.dom[c];if(!a)throw new Error("DOM is null.");if(o.current[c]){const l=a.getBoundingClientRect();if(s.scale.set(l.width,l.height,1),s.position.set(l.left+l.width*.5-i.width*.5,-l.top-l.height*.5+i.height*.5,0),s instanceof t.Mesh){const d=s.material;v(d,"u_texture",n.texture[c]),v(d,"u_textureResolution",n.resolution[c]),v(d,"u_resolution",r.current.set(l.width,l.height)),v(d,"u_borderRadius",n.boderRadius[c]?n.boderRadius[c]:0)}}})},Qe=()=>{const n=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,o=!1)=>{n.current.forEach((c,a)=>{c&&(i.current[a]=!0)});const s=o?[...i.current]:[...n.current];return e<0?s:s[e]},[]);return{isIntersectingRef:n,isIntersectingOnceRef:i,isIntersecting:r}},J={texture:[],dom:[],resolution:[],boderRadius:[],onIntersect:[]},en=({size:n,dpr:i},r=[])=>{const e=u.useMemo(()=>new t.Scene,[]),o=_(n),[s,c]=C({scene:e,camera:o,size:n,dpr:i,isSizeUpdate:!0}),[a,l]=P(J),d=u.useRef(new t.Vector2(0,0)),[f,m]=u.useState(!0);u.useEffect(()=>{m(!0)},r);const g=Ke(),{isIntersectingOnceRef:h,isIntersectingRef:x,isIntersecting:y}=Qe();return[u.useCallback((w,M)=>{const{gl:D,size:A}=w;return M&&l(M),He(a),f&&(Je({params:a,size:A,scene:e}),g({isIntersectingRef:x,isIntersectingOnceRef:h,params:a}),m(!1)),Ze({params:a,size:A,resolutionRef:d,scene:e,isIntersectingRef:x}),c(D)},[c,l,g,f,e,a,h,x]),l,{scene:e,camera:o,renderTarget:s,isIntersecting:y}]};var nn=`precision mediump float;
+}`;const Je=({params:n,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof t.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),n.texture.forEach((e,o)=>{const s=new t.Mesh(new t.PlaneGeometry(1,1),new t.ShaderMaterial({vertexShader:Ye,fragmentShader:qe,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new t.Vector2(0,0)},u_resolution:{value:new t.Vector2(0,0)},u_borderRadius:{value:n.boderRadius[o]?n.boderRadius[o]:0}}}));r.add(s)})},Ke=()=>{const n=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:o,params:s})=>{n.current.length>0&&n.current.forEach((a,l)=>{a.unobserve(i.current[l])}),i.current=[],n.current=[];const c=new Array(s.dom.length).fill(!1);e.current=[...c],o.current=[...c],s.dom.forEach((a,l)=>{const d=m=>{m.forEach(g=>{s.onIntersect[l]&&s.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(a),n.current.push(f),i.current.push(a)})},[])},Ze=({params:n,size:i,resolutionRef:r,scene:e,isIntersectingRef:o})=>{e.children.forEach((s,c)=>{const a=n.dom[c];if(!a)throw new Error("DOM is null.");if(o.current[c]){const l=a.getBoundingClientRect();if(s.scale.set(l.width,l.height,1),s.position.set(l.left+l.width*.5-i.width*.5,-l.top-l.height*.5+i.height*.5,0),n.rotation[c]&&s.rotation.copy(n.rotation[c]),s instanceof t.Mesh){const d=s.material;v(d,"u_texture",n.texture[c]),v(d,"u_textureResolution",n.resolution[c]),v(d,"u_resolution",r.current.set(l.width,l.height)),v(d,"u_borderRadius",n.boderRadius[c]?n.boderRadius[c]:0)}}})},Qe=()=>{const n=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,o=!1)=>{n.current.forEach((c,a)=>{c&&(i.current[a]=!0)});const s=o?[...i.current]:[...n.current];return e<0?s:s[e]},[]);return{isIntersectingRef:n,isIntersectingOnceRef:i,isIntersecting:r}},J={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},en=({size:n,dpr:i},r=[])=>{const e=u.useMemo(()=>new t.Scene,[]),o=_(n),[s,c]=C({scene:e,camera:o,size:n,dpr:i,isSizeUpdate:!0}),[a,l]=P(J),d=u.useRef(new t.Vector2(0,0)),[f,m]=u.useState(!0);u.useEffect(()=>{m(!0)},r);const g=Ke(),{isIntersectingOnceRef:h,isIntersectingRef:x,isIntersecting:y}=Qe();return[u.useCallback((w,M)=>{const{gl:D,size:A}=w;return M&&l(M),He(a),f&&(Je({params:a,size:A,scene:e}),g({isIntersectingRef:x,isIntersectingOnceRef:h,params:a}),m(!1)),Ze({params:a,size:A,resolutionRef:d,scene:e,isIntersectingRef:x}),c(D)},[c,l,g,f,e,a,h,x]),l,{scene:e,camera:o,renderTarget:s,isIntersecting:y}]};var nn=`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.18",
+   "version": "1.0.19",
    "description": "wide variety of shader effects for React",
    "main": "./build/use-shader-fx.umd.cjs",
    "module": "./build/use-shader-fx.js",

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

@@ -20,6 +20,8 @@ export type DomSyncerParams = {
    resolution?: THREE.Vector2[];
    /** default:0.0[] */
    boderRadius?: number[];
+   /** the angle you want to rotate */
+   rotation?: THREE.Euler[];
    /** Array of callback functions when crossed */
    onIntersect?: ((entry: IntersectionObserverEntry) => void)[];
 };
@@ -42,6 +44,7 @@ export const DOMSYNCER_PARAMS: DomSyncerParams = {
    dom: [],
    resolution: [],
    boderRadius: [],
+   rotation: [],
    onIntersect: [],
 };
 

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

@@ -30,6 +30,11 @@ export const updateRect = ({
             -rect.top - rect.height * 0.5 + size.height * 0.5,
             0.0
          );
+
+         if (params.rotation![i]) {
+            mesh.rotation.copy(params.rotation![i]);
+         }
+
          if (mesh instanceof THREE.Mesh) {
             const material: DomSyncerMaterial = mesh.material;
             setUniform(material, "u_texture", params.texture![i]);

packages/use-shader-fx/package-lock.json

@@ -12,6 +12,8 @@ export type DomSyncerParams = {
     resolution?: THREE.Vector2[];
     /** default:0.0[] */
     boderRadius?: number[];
+    /** the angle you want to rotate */
+    rotation?: THREE.Euler[];
     /** Array of callback functions when crossed */
     onIntersect?: ((entry: IntersectionObserverEntry) => void)[];
 };