@react-three/drei 9.80.1 → 9.80.3

package/core/DeviceOrientationControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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 c=u(e),i=o(r);const l=i.forwardRef(((e,r)=>{const{camera:u,onChange:o,makeDefault:l,...s}=e,a=t.useThree((e=>e.camera)),f=t.useThree((e=>e.invalidate)),d=t.useThree((e=>e.get)),v=t.useThree((e=>e.set)),b=u||a,[h]=i.useState((()=>new n.DeviceOrientationControls(b)));return i.useEffect((()=>{const e=e=>{f(),o&&o(e)};return null==h||null==h.addEventListener||h.addEventListener("change",e),()=>null==h||null==h.removeEventListener?void 0:h.removeEventListener("change",e)}),[o,h,f]),t.useFrame((()=>null==h?void 0:h.update()),-1),i.useEffect((()=>{const e=h;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[h]),i.useEffect((()=>{if(l){const e=d().controls;return v({controls:h}),()=>v({controls:e})}}),[l,h]),h?i.createElement("primitive",c.default({ref:r,object:h},s)):null}));exports.DeviceOrientationControls=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function o(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 c=u(e),i=o(r);const l=i.forwardRef(((e,r)=>{const{camera:u,onChange:o,makeDefault:l,...s}=e,a=t.useThree((e=>e.camera)),f=t.useThree((e=>e.invalidate)),d=t.useThree((e=>e.get)),v=t.useThree((e=>e.set)),b=u||a,h=i.useMemo((()=>new n.DeviceOrientationControls(b)),[b]);return i.useEffect((()=>{const e=e=>{f(),o&&o(e)};return null==h||null==h.addEventListener||h.addEventListener("change",e),()=>null==h||null==h.removeEventListener?void 0:h.removeEventListener("change",e)}),[o,h,f]),t.useFrame((()=>null==h?void 0:h.update()),-1),i.useEffect((()=>{const e=h;return null==e||e.connect(),()=>null==e?void 0:e.dispose()}),[h]),i.useEffect((()=>{if(l){const e=d().controls;return v({controls:h}),()=>v({controls:e})}}),[l,h]),h?i.createElement("primitive",c.default({ref:r,object:h},s)):null}));exports.DeviceOrientationControls=l;

package/core/DeviceOrientationControls.js

@@ -15,7 +15,7 @@ const DeviceOrientationControls = /*#__PURE__*/React.forwardRef((props, ref) =>
   const get = useThree(state => state.get);
   const set = useThree(state => state.set);
   const explCamera = camera || defaultCamera;
-  const [controls] = React.useState(() => new DeviceOrientationControls$1(explCamera));
+  const controls = React.useMemo(() => new DeviceOrientationControls$1(explCamera), [explCamera]);
   React.useEffect(() => {
     const callback = e => {
       invalidate();

package/core/Example.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { type Color } from '@react-three/fiber';
+import type { Color } from '@react-three/fiber';
 export declare type ExampleProps = {
     font: string;
     color?: Color;

package/core/PointerLockControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=o(e),i=c(r);const u=i.forwardRef((({domElement:e,selector:r,onChange:o,onLock:c,onUnlock:u,enabled:a=!0,makeDefault:l,...d},f)=>{const{camera:h,...m}=d,v=t.useThree((e=>e.setEvents)),E=t.useThree((e=>e.gl)),b=t.useThree((e=>e.camera)),p=t.useThree((e=>e.invalidate)),k=t.useThree((e=>e.events)),L=t.useThree((e=>e.get)),g=t.useThree((e=>e.set)),j=h||b,y=e||k.connected||E.domElement,[O]=i.useState((()=>new n.PointerLockControls(j)));return i.useEffect((()=>{if(a){O.connect(y);const e=L().events.compute;return v({compute(e,t){const r=t.size.width/2,n=t.size.height/2;t.pointer.set(r/t.size.width*2-1,-n/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{O.disconnect(),v({compute:e})}}}),[a,O]),i.useEffect((()=>{const e=e=>{p(),o&&o(e)};O.addEventListener("change",e),c&&O.addEventListener("lock",c),u&&O.addEventListener("unlock",u);const t=()=>O.lock(),n=r?Array.from(document.querySelectorAll(r)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{O.removeEventListener("change",e),c&&O.addEventListener("lock",c),u&&O.addEventListener("unlock",u),n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[o,c,u,r,O,p]),i.useEffect((()=>{if(l){const e=L().controls;return g({controls:O}),()=>g({controls:e})}}),[l,O]),i.createElement("primitive",s.default({ref:f,object:O},m))}));exports.PointerLockControls=u;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("@react-three/fiber"),r=require("react"),n=require("three-stdlib");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function c(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 s=o(e),i=c(r);const u=i.forwardRef((({domElement:e,selector:r,onChange:o,onLock:c,onUnlock:u,enabled:a=!0,makeDefault:l,...d},f)=>{const{camera:m,...h}=d,v=t.useThree((e=>e.setEvents)),E=t.useThree((e=>e.gl)),b=t.useThree((e=>e.camera)),p=t.useThree((e=>e.invalidate)),k=t.useThree((e=>e.events)),L=t.useThree((e=>e.get)),g=t.useThree((e=>e.set)),j=m||b,y=e||k.connected||E.domElement,O=i.useMemo((()=>new n.PointerLockControls(j)),[j]);return i.useEffect((()=>{if(a){O.connect(y);const e=L().events.compute;return v({compute(e,t){const r=t.size.width/2,n=t.size.height/2;t.pointer.set(r/t.size.width*2-1,-n/t.size.height*2+1),t.raycaster.setFromCamera(t.pointer,t.camera)}}),()=>{O.disconnect(),v({compute:e})}}}),[a,O]),i.useEffect((()=>{const e=e=>{p(),o&&o(e)};O.addEventListener("change",e),c&&O.addEventListener("lock",c),u&&O.addEventListener("unlock",u);const t=()=>O.lock(),n=r?Array.from(document.querySelectorAll(r)):[document];return n.forEach((e=>e&&e.addEventListener("click",t))),()=>{O.removeEventListener("change",e),c&&O.addEventListener("lock",c),u&&O.addEventListener("unlock",u),n.forEach((e=>e?e.removeEventListener("click",t):void 0))}}),[o,c,u,r,O,p]),i.useEffect((()=>{if(l){const e=L().controls;return g({controls:O}),()=>g({controls:e})}}),[l,O]),i.createElement("primitive",s.default({ref:f,object:O},h))}));exports.PointerLockControls=u;

package/core/PointerLockControls.js

@@ -26,7 +26,7 @@ const PointerLockControls = /*#__PURE__*/React.forwardRef(({
   const set = useThree(state => state.set);
   const explCamera = camera || defaultCamera;
   const explDomElement = domElement || events.connected || gl.domElement;
-  const [controls] = React.useState(() => new PointerLockControls$1(explCamera));
+  const controls = React.useMemo(() => new PointerLockControls$1(explCamera), [explCamera]);
   React.useEffect(() => {
     if (enabled) {
       controls.connect(explDomElement); // Force events to be centered while PLC is active

package/core/useAnimations.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("three"),r=require("@react-three/fiber");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 c=n(e);exports.useAnimations=function(e,n){const u=c.useRef(),[a]=c.useState((()=>n?n instanceof t.Object3D?{current:n}:n:u)),[o]=c.useState((()=>new t.AnimationMixer(void 0)));c.useLayoutEffect((()=>{o._root=a.current}),[o,n]);const i=c.useRef({}),[s]=c.useState((()=>{const t={};return e.forEach((e=>Object.defineProperty(t,e.name,{enumerable:!0,get(){if(a.current)return i.current[e.name]||(i.current[e.name]=o.clipAction(e,a.current))},configurable:!0}))),{ref:a,clips:e,actions:t,names:e.map((e=>e.name)),mixer:o}}));return r.useFrame(((e,t)=>o.update(t))),c.useEffect((()=>{const e=a.current;return()=>{i.current={},Object.values(s.actions).forEach((t=>{e&&o.uncacheAction(t,e)}))}}),[e]),c.useEffect((()=>()=>{o.stopAllAction()}),[o]),s};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),r=require("three"),t=require("@react-three/fiber");function n(e){if(e&&e.__esModule)return e;var r=Object.create(null);return e&&Object.keys(e).forEach((function(t){if("default"!==t){var n=Object.getOwnPropertyDescriptor(e,t);Object.defineProperty(r,t,n.get?n:{enumerable:!0,get:function(){return e[t]}})}})),r.default=e,Object.freeze(r)}var c=n(e);exports.useAnimations=function(e,n){const u=c.useRef(),[o]=c.useState((()=>n?n instanceof r.Object3D?{current:n}:n:u)),[a]=c.useState((()=>new r.AnimationMixer(void 0)));c.useLayoutEffect((()=>{o.current=n&&(n instanceof r.Object3D?n:n.current),a._root=o.current}),[n]);const i=c.useRef({}),s=c.useMemo((()=>{const r={};return e.forEach((e=>Object.defineProperty(r,e.name,{enumerable:!0,get(){if(o.current)return i.current[e.name]||(i.current[e.name]=a.clipAction(e,o.current))},configurable:!0}))),{ref:o,clips:e,actions:r,names:e.map((e=>e.name)),mixer:a}}),[e]);return t.useFrame(((e,r)=>a.update(r))),c.useEffect((()=>{const e=o.current;return()=>{i.current={},a.stopAllAction(),Object.values(s.actions).forEach((r=>{e&&a.uncacheAction(r,e)}))}}),[e]),s};

package/core/useAnimations.js

@@ -9,9 +9,12 @@ function useAnimations(clips, root) {
   } : root : ref); // eslint-disable-next-line prettier/prettier
 
   const [mixer] = React.useState(() => new AnimationMixer(undefined));
-  React.useLayoutEffect(() => void (mixer._root = actualRef.current), [mixer, root]);
+  React.useLayoutEffect(() => {
+    actualRef.current = root && (root instanceof Object3D ? root : root.current);
+    mixer._root = actualRef.current;
+  }, [root]);
   const lazyActions = React.useRef({});
-  const [api] = React.useState(() => {
+  const api = React.useMemo(() => {
     const actions = {};
     clips.forEach(clip => Object.defineProperty(actions, clip.name, {
       enumerable: true,
@@ -31,13 +34,14 @@ function useAnimations(clips, root) {
       names: clips.map(c => c.name),
       mixer
     };
-  });
+  }, [clips]);
   useFrame((state, delta) => mixer.update(delta));
   React.useEffect(() => {
     const currentRoot = actualRef.current;
     return () => {
       // Clean up only when clips change, wipe out lazy actions and uncache clips
       lazyActions.current = {};
+      mixer.stopAllAction();
       Object.values(api.actions).forEach(action => {
         if (currentRoot) {
           mixer.uncacheAction(action, currentRoot);
@@ -45,11 +49,6 @@ function useAnimations(clips, root) {
       });
     };
   }, [clips]);
-  React.useEffect(() => {
-    return () => {
-      mixer.stopAllAction();
-    };
-  }, [mixer]);
   return api;
 }