Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Commit 08d2469

Browse files
Merge pull request #46 from takuma-hmng8/dev
update README
2 parents 8cc9853 + 128d1ef commit 08d2469

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)

AltStyle によって変換されたページ (->オリジナル) /