@react-three/drei 9.108.4 → 9.109.0

package/README.md

@@ -4350,6 +4350,16 @@ This component makes its contents float or hover.
 </Float>
 ```
 
+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
+<Canvas frameloop="demand">
+  <Float autoInvalidate>
+    <mesh />
+  </Float>
+</Canvas>
+```
+
 #### Stage
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/staging-stage--stage-st)
@@ -5078,3 +5088,18 @@ Makes an object's shadow respect its opacity and alphaMap.
 ```
 
 > Note: This component uses Screendoor transparency using a dither pattern. This pattern is notacible when the camera gets close to the shadow.
+
+<details>
+  <summary>Maintenance</summary>
+
+### Tests
+
+To run visual tests in the same environment as the CI:
+
+```sh
+$ docker run --init --rm -v $(pwd):/app -w /app ghcr.io/pmndrs/playwright:main yarn test
+```
+
+NB: if running on mac m-series, you'll need to add `--platform linux/arm64` to the docker command.
+
+</details>

package/core/Float.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=n(e),o=n(r);const u=a.forwardRef((({children:e,enabled:r=!0,speed:n=1,rotationIntensity:u=1,floatIntensity:i=1,floatingRange:c=[-.1,.1],...l},s)=>{const f=a.useRef(null);a.useImperativeHandle(s,(()=>f.current),[]);const d=a.useRef(1e4*Math.random());return t.useFrame((e=>{var t,a;if(!r||0===n)return;const l=d.current+e.clock.getElapsedTime();f.current.rotation.x=Math.cos(l/4*n)/8*u,f.current.rotation.y=Math.sin(l/4*n)/8*u,f.current.rotation.z=Math.sin(l/4*n)/20*u;let s=Math.sin(l/4*n)/10;s=o.MathUtils.mapLinear(s,-.1,.1,null!==(t=null==c?void 0:c[0])&&void 0!==t?t:-.1,null!==(a=null==c?void 0:c[1])&&void 0!==a?a:.1),f.current.position.y=s*i,f.current.updateMatrix()})),a.createElement("group",l,a.createElement("group",{ref:f,matrixAutoUpdate:!1},e))}));exports.Float=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@react-three/fiber"),r=require("three");function n(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(r){if("default"!==r){var n=Object.getOwnPropertyDescriptor(e,r);Object.defineProperty(t,r,n.get?n:{enumerable:!0,get:function(){return e[r]}})}})),t.default=e,Object.freeze(t)}var a=n(e),o=n(r);const i=a.forwardRef((({children:e,enabled:r=!0,speed:n=1,rotationIntensity:i=1,floatIntensity:u=1,floatingRange:c=[-.1,.1],autoInvalidate:l=!1,...s},d)=>{const f=a.useRef(null);a.useImperativeHandle(d,(()=>f.current),[]);const p=a.useRef(1e4*Math.random());return t.useFrame((e=>{var t,a;if(!r||0===n)return;l&&e.invalidate();const s=p.current+e.clock.getElapsedTime();f.current.rotation.x=Math.cos(s/4*n)/8*i,f.current.rotation.y=Math.sin(s/4*n)/8*i,f.current.rotation.z=Math.sin(s/4*n)/20*i;let d=Math.sin(s/4*n)/10;d=o.MathUtils.mapLinear(d,-.1,.1,null!==(t=null==c?void 0:c[0])&&void 0!==t?t:-.1,null!==(a=null==c?void 0:c[1])&&void 0!==a?a:.1),f.current.position.y=d*u,f.current.updateMatrix()})),a.createElement("group",s,a.createElement("group",{ref:f,matrixAutoUpdate:!1},e))}));exports.Float=i;

package/core/Float.d.ts

@@ -8,5 +8,6 @@ export type FloatProps = JSX.IntrinsicElements['group'] & {
     floatIntensity?: number;
     children?: React.ReactNode;
     floatingRange?: [number?, number?];
+    autoInvalidate?: boolean;
 };
 export declare const Float: ForwardRefComponent<FloatProps, THREE.Group>;

package/core/Float.js

@@ -9,6 +9,7 @@ const Float = /* @__PURE__ */React.forwardRef(({
   rotationIntensity = 1,
   floatIntensity = 1,
   floatingRange = [-0.1, 0.1],
+  autoInvalidate = false,
   ...props
 }, forwardRef) => {
   const ref = React.useRef(null);
@@ -17,6 +18,7 @@ const Float = /* @__PURE__ */React.forwardRef(({
   useFrame(state => {
     var _floatingRange$, _floatingRange$2;
     if (!enabled || speed === 0) return;
+    if (autoInvalidate) state.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;