Skip to content

Commit 128d1ef

Browse files
author
takuma-hmng8
committed
update README
1 parent 34caad6 commit 128d1ef

File tree

8 files changed

+30
-21
lines changed

8 files changed

+30
-21
lines changed

README.md

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -293,12 +293,20 @@ useFrame((props) => {
293293
The boolean will be updated after executing the `onIntersect` function.
294294

295295
```tsx
296-
/**
297-
* @param index - Index of the dom for which you want to return an intersection decision. -1 will return the entire array.
298-
* @param once - If set to true, it will continue to return true once crossed.
299-
*/
300-
301-
domSyncerObj.isIntersecting(index, isOnce); // return boolean;
296+
type DomSyncerObject = {
297+
scene: THREE.Scene;
298+
camera: THREE.Camera;
299+
renderTarget: THREE.WebGLRenderTarget;
300+
/**
301+
* A function that returns a determination whether the DOM intersects or not.
302+
* The boolean will be updated after executing the onIntersect function.
303+
* @param index - Index of the dom for which you want to return an intersection decision. -1 will return the entire array.
304+
* @param once - If set to true, it will continue to return true once crossed.
305+
*/
306+
isIntersecting: IsIntersecting;
307+
/** Returns the target's DOMRect[] */
308+
DOMRects: DOMRect[];
309+
};
302310
```
303311

304312
`DomSyncerParams` can be passed the `onIntersect` function.

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

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -515,7 +515,7 @@ void main() {
515515
alpha *= textureAlpha;
516516
517517
gl_FragColor = vec4(textureColor, alpha);
518-
}`;const Qe=({params:t,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof n.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),t.texture.forEach((e,a)=>{const c=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:Ze,fragmentShader:Je,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[a]?t.boderRadius[a]:0}}}));r.add(c)})},en=()=>{const t=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:a,params:c})=>{t.current.length>0&&t.current.forEach((o,l)=>{o.unobserve(i.current[l])}),i.current=[],t.current=[];const v=new Array(c.dom.length).fill(!1);e.current=[...v],a.current=[...v],c.dom.forEach((o,l)=>{const d=m=>{m.forEach(g=>{c.onIntersect[l]&&c.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(o),t.current.push(f),i.current.push(o)})},[])},nn=()=>{const t=u.useRef([]),i=u.useCallback(({params:r,size:e,resolutionRef:a,scene:c,isIntersectingRef:v})=>{c.children.length!==t.current.length&&(t.current=new Array(c.children.length)),c.children.forEach((o,l)=>{const d=r.dom[l];if(!d)throw new Error("DOM is null.");const f=d.getBoundingClientRect();if(t.current[l]=f,v.current[l]&&(o.scale.set(f.width,f.height,1),o.position.set(f.left+f.width*.5-e.width*.5,-f.top-f.height*.5+e.height*.5,0),r.rotation[l]&&o.rotation.copy(r.rotation[l]),o instanceof n.Mesh)){const m=o.material;s(m,"u_texture",r.texture[l]),s(m,"u_textureResolution",r.resolution[l]),s(m,"u_resolution",a.current.set(f.width,f.height)),s(m,"u_borderRadius",r.boderRadius[l]?r.boderRadius[l]:0)}})},[]);return[t.current,i]},tn=()=>{const t=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,a=!1)=>{t.current.forEach((v,o)=>{v&&(i.current[o]=!0)});const c=a?[...i.current]:[...t.current];return e<0?c:c[e]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:i,isIntersecting:r}},K={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},rn=({size:t,dpr:i},r=[])=>{const e=u.useMemo(()=>new n.Scene,[]),a=_(t),[c,v]=R({scene:e,camera:a,size:t,dpr:i,isSizeUpdate:!0}),[o,l]=b(K),[d,f]=nn(),m=u.useRef(new n.Vector2(0,0)),[g,x]=u.useState(!0);u.useEffect(()=>{x(!0)},r);const M=en(),{isIntersectingOnceRef:y,isIntersectingRef:T,isIntersecting:C}=tn();return[u.useCallback((U,O)=>{const{gl:D,size:h}=U;return O&&l(O),Ke(o),g&&(Qe({params:o,size:h,scene:e}),M({isIntersectingRef:T,isIntersectingOnceRef:y,params:o}),x(!1)),f({params:o,size:h,resolutionRef:m,scene:e,isIntersectingRef:T}),v(D)},[v,l,M,f,g,e,o,y,T]),l,{scene:e,camera:a,renderTarget:c,isIntersecting:C,DOMRects:d}]};var on=`precision mediump float;
518+
}`;const Qe=({params:t,size:i,scene:r})=>{r.children.length>0&&(r.children.forEach(e=>{e instanceof n.Mesh&&(e.geometry.dispose(),e.material.dispose())}),r.remove(...r.children)),t.texture.forEach((e,a)=>{const c=new n.Mesh(new n.PlaneGeometry(1,1),new n.ShaderMaterial({vertexShader:Ze,fragmentShader:Je,transparent:!0,uniforms:{u_texture:{value:e},u_textureResolution:{value:new n.Vector2(0,0)},u_resolution:{value:new n.Vector2(0,0)},u_borderRadius:{value:t.boderRadius[a]?t.boderRadius[a]:0}}}));r.add(c)})},en=()=>{const t=u.useRef([]),i=u.useRef([]);return u.useCallback(({isIntersectingRef:e,isIntersectingOnceRef:a,params:c})=>{t.current.length>0&&t.current.forEach((o,l)=>{o.unobserve(i.current[l])}),i.current=[],t.current=[];const v=new Array(c.dom.length).fill(!1);e.current=[...v],a.current=[...v],c.dom.forEach((o,l)=>{const d=m=>{m.forEach(g=>{c.onIntersect[l]&&c.onIntersect[l](g),e.current[l]=g.isIntersecting})},f=new IntersectionObserver(d,{rootMargin:"0px",threshold:0});f.observe(o),t.current.push(f),i.current.push(o)})},[])},nn=()=>{const t=u.useRef([]),i=u.useCallback(({params:r,size:e,resolutionRef:a,scene:c,isIntersectingRef:v})=>{c.children.length!==t.current.length&&(t.current=new Array(c.children.length)),c.children.forEach((o,l)=>{const d=r.dom[l];if(!d)throw new Error("DOM is null.");const f=d.getBoundingClientRect();if(t.current[l]=f,o.scale.set(f.width,f.height,1),o.position.set(f.left+f.width*.5-e.width*.5,-f.top-f.height*.5+e.height*.5,0),v.current[l]&&(r.rotation[l]&&o.rotation.copy(r.rotation[l]),o instanceof n.Mesh)){const m=o.material;s(m,"u_texture",r.texture[l]),s(m,"u_textureResolution",r.resolution[l]),s(m,"u_resolution",a.current.set(f.width,f.height)),s(m,"u_borderRadius",r.boderRadius[l]?r.boderRadius[l]:0)}})},[]);return[t.current,i]},tn=()=>{const t=u.useRef([]),i=u.useRef([]),r=u.useCallback((e,a=!1)=>{t.current.forEach((v,o)=>{v&&(i.current[o]=!0)});const c=a?[...i.current]:[...t.current];return e<0?c:c[e]},[]);return{isIntersectingRef:t,isIntersectingOnceRef:i,isIntersecting:r}},K={texture:[],dom:[],resolution:[],boderRadius:[],rotation:[],onIntersect:[]},rn=({size:t,dpr:i},r=[])=>{const e=u.useMemo(()=>new n.Scene,[]),a=_(t),[c,v]=R({scene:e,camera:a,size:t,dpr:i,isSizeUpdate:!0}),[o,l]=b(K),[d,f]=nn(),m=u.useRef(new n.Vector2(0,0)),[g,x]=u.useState(!0);u.useEffect(()=>{x(!0)},r);const M=en(),{isIntersectingOnceRef:y,isIntersectingRef:T,isIntersecting:C}=tn();return[u.useCallback((U,O)=>{const{gl:D,size:h}=U;return O&&l(O),Ke(o),g&&(Qe({params:o,size:h,scene:e}),M({isIntersectingRef:T,isIntersectingOnceRef:y,params:o}),x(!1)),f({params:o,size:h,resolutionRef:m,scene:e,isIntersectingRef:T}),v(D)},[v,l,M,f,g,e,o,y,T]),l,{scene:e,camera:a,renderTarget:c,isIntersecting:C,DOMRects:d}]};var on=`precision mediump float;
519519
520520
varying vec2 vUv;
521521

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/use-shader-fx/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@hmng8/use-shader-fx",
3-
"version": "1.0.27",
3+
"version": "1.0.28",
44
"description": "wide variety of shader effects for React",
55
"main": "./build/use-shader-fx.umd.cjs",
66
"module": "./build/use-shader-fx.js",

packages/use-shader-fx/src/hooks/useDomSyncer/utils/useUpdateDomRect.ts

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -41,14 +41,15 @@ export const useUpdateDomRect = (): UseUpdateDomRectReturn => {
4141
const rect = domElement.getBoundingClientRect();
4242
domRects.current[i] = rect;
4343

44-
if (isIntersectingRef.current[i]) {
45-
mesh.scale.set(rect.width, rect.height, 1.0);
46-
mesh.position.set(
47-
rect.left + rect.width * 0.5 - size.width * 0.5,
48-
-rect.top - rect.height * 0.5 + size.height * 0.5,
49-
0.0
50-
);
44+
// Intersection cannot be determined accurately depending on the mobile navigation bar, so it seems better to update it constantly
45+
mesh.scale.set(rect.width, rect.height, 1.0);
46+
mesh.position.set(
47+
rect.left + rect.width * 0.5 - size.width * 0.5,
48+
-rect.top - rect.height * 0.5 + size.height * 0.5,
49+
0.0
50+
);
5151

52+
if (isIntersectingRef.current[i]) {
5253
if (params.rotation![i]) {
5354
mesh.rotation.copy(params.rotation![i]);
5455
}

0 commit comments

Comments
 (0)