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

update useDomSyncer #66

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
takuma-hmng8 merged 1 commit into main from dev
Jan 26, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 16 additions & 2 deletions README.md
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -368,7 +368,8 @@ 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(() => {
Expand All @@ -378,6 +379,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,
dom: domArr.current,
boderRadius: [...Array(domArr.current.length)].map((_, i) => i * 50.0),
onIntersect: [...Array(domArr.current.length)].map((_, i) => (entry) => {
Expand Down Expand Up @@ -419,15 +422,20 @@ type DomSyncerObject = {
scene: THREE.Scene;
camera: THREE.Camera;
renderTarget: THREE.WebGLRenderTarget;
output: THREE.Texture;
/**
* A function that returns a determination whether the DOM intersects or not.
* The boolean will be updated after executing the onIntersect function.
* @param index - Index of the dom for which you want to return an intersection decision. -1 will return the entire array.
* @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[];
/** You can set callbacks for when at least one DOM is visible and when it is completely hidden. */
useDomView: UseDomView;
};
```

Expand All @@ -443,7 +451,13 @@ 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)[];
/** 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?: Key;
};
```

`updateKey` : 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.
4 changes: 3 additions & 1 deletion app/domSyncer/DomSyncer.tsx
View file Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,8 @@ export const DomSyncer = ({ state }: { state: number }) => {

const [updateDomSyncer, setDomSyncer, domSyncerObj] = useDomSyncer(
{ size, dpr },
[state]
[state],
state
);

const { setFrameloop } = useThree();
Expand Down Expand Up @@ -85,6 +86,7 @@ export const DomSyncer = ({ state }: { state: number }) => {

setDomSyncer({
dom: domArr.current,
updateKey: state,
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)
Expand Down
Loading

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