From 4bfbff74da04cd0f25d44708d40554f2b8148bd6 Mon Sep 17 00:00:00 2001 From: = Date: Tue, 16 Jul 2024 21:14:09 +0200 Subject: [PATCH 1/4] fix(Float): add invalidate to useFrame for on-demand rendering --- src/core/Float.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/core/Float.tsx b/src/core/Float.tsx index 20c2dfd92..36c6ff68e 100644 --- a/src/core/Float.tsx +++ b/src/core/Float.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { useFrame } from '@react-three/fiber' +import { invalidate, useFrame } from '@react-three/fiber' import * as THREE from 'three' import { ForwardRefComponent } from '../helpers/ts-utils' @@ -33,6 +33,8 @@ export const Float: ForwardRefComponent = /* @__PURE__ const offset = React.useRef(Math.random() * 10000) useFrame((state) => { if (!enabled || speed === 0) return + + invalidate() const t = offset.current + state.clock.getElapsedTime() ref.current.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity ref.current.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity From 08e5ea042403930b799b3ebaadb573b108326a73 Mon Sep 17 00:00:00 2001 From: = Date: Wed, 17 Jul 2024 19:53:36 +0200 Subject: [PATCH 2/4] feat(Float): add auto invalidate prop --- src/core/Float.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/core/Float.tsx b/src/core/Float.tsx index 36c6ff68e..e89ad5d99 100644 --- a/src/core/Float.tsx +++ b/src/core/Float.tsx @@ -10,6 +10,7 @@ export type FloatProps = JSX.IntrinsicElements['group'] & { floatIntensity?: number children?: React.ReactNode floatingRange?: [number?, number?] + autoInvalidate?: boolean } export const Float: ForwardRefComponent = /* @__PURE__ */ React.forwardRef< @@ -24,6 +25,7 @@ export const Float: ForwardRefComponent = /* @__PURE__ rotationIntensity = 1, floatIntensity = 1, floatingRange = [-0.1, 0.1], + autoInvalidate = false, ...props }, forwardRef @@ -34,7 +36,10 @@ export const Float: ForwardRefComponent = /* @__PURE__ useFrame((state) => { if (!enabled || speed === 0) return - invalidate() + if (autoInvalidate) { + invalidate() + } + const t = offset.current + state.clock.getElapsedTime() ref.current.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity ref.current.rotation.y = (Math.sin((t / 4) * speed) / 8) * rotationIntensity From 34b6d7e5e9f4e5b43009391897c330ebc112d3ac Mon Sep 17 00:00:00 2001 From: = Date: Wed, 17 Jul 2024 20:32:56 +0200 Subject: [PATCH 3/4] docs(Float): add autoInvalidate prop to README.md --- README.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/README.md b/README.md index 97879b8f5..f92e54bdd 100644 --- a/README.md +++ b/README.md @@ -4350,6 +4350,16 @@ This component makes its contents float or hover. ``` +If you have your frameloop set to `demand`, you can set `autoInvalidate` to `true`. This will ensure the animation will render while it is enabled. + +```js + + + + + +``` + #### Stage [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st) From f7460c98f5f4b57194a4a09b192f695d83919105 Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Mon, 22 Jul 2024 11:25:23 -0500 Subject: [PATCH 4/4] fix(Float): use local invalidate for views --- src/core/Float.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/core/Float.tsx b/src/core/Float.tsx index e89ad5d99..bccad1583 100644 --- a/src/core/Float.tsx +++ b/src/core/Float.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { invalidate, useFrame } from '@react-three/fiber' +import { useFrame } from '@react-three/fiber' import * as THREE from 'three' import { ForwardRefComponent } from '../helpers/ts-utils' @@ -36,9 +36,7 @@ export const Float: ForwardRefComponent = /* @__PURE__ useFrame((state) => { if (!enabled || speed === 0) return - if (autoInvalidate) { - invalidate() - } + if (autoInvalidate) state.invalidate() const t = offset.current + state.clock.getElapsedTime() ref.current.rotation.x = (Math.cos((t / 4) * speed) / 8) * rotationIntensity