@react-three/drei 9.121.5 → 9.122.0

package/core/MotionPathControls.cjs.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function u(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=u(e),a=c(t),i=c(r);const f=i.createContext(null);function l(){return i.useContext(f)}function p({points:e=50}){const{path:t}=l(),[r,n]=i.useState([]),[o]=i.useState((()=>new a.MeshBasicMaterial({color:"black"}))),[u]=i.useState((()=>new a.SphereGeometry(.025,16,16))),c=i.useRef([]);return i.useEffect((()=>{t.curves!==c.current&&(n(t.getPoints(e)),c.current=t.curves)})),i.createElement(i.Fragment,null,r.map(((e,t)=>i.createElement("mesh",{key:t,material:o,geometry:u,position:[e.x,e.y,e.z]}))))}const m=i.forwardRef((({children:e,curves:t=[],object:r,debug:u=!1,smooth:c=!1,focus:l,offset:m,eps:d=1e-5,damping:g=.1,focusDamping:v=.1,maxSpeed:b=1/0,...h},j)=>{const{camera:y}=n.useThree(),P=i.useRef(),[w]=i.useState((()=>new a.CurvePath)),x=i.useRef(null!=m?m:0),O=i.useMemo((()=>({focus:l,object:(null==r?void 0:r.current)instanceof a.Object3D?r:{current:y},path:w,current:x.current,offset:x.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[l,r]);i.useLayoutEffect((()=>{var e;w.curves=[];const r=t.length>0?t:null==(e=P.current)?void 0:e.__r3f.objects;for(var n=0;n<r.length;n++)w.add(r[n]);if(c){const e=w.getPoints("number"==typeof c?c:1),t=new a.CatmullRomCurve3(e);w.curves=[t]}w.updateArcLengths()})),i.useImperativeHandle(j,(()=>P.current),[]),i.useLayoutEffect((()=>{x.current=o.misc.repeat(x.current,1)}),[m]);let E=0;const[C]=i.useState((()=>new a.Vector3));return n.useFrame(((e,t)=>{if(E=O.offset,o.easing.damp(x,"current",void 0!==m?m:O.current,g,t,b,void 0,d),O.offset=o.misc.repeat(x.current,1),w.getCurveLengths().length>0){w.getPointAt(O.offset,O.point),w.getTangentAt(O.offset,O.tangent).normalize(),w.getPointAt(o.misc.repeat(x.current-(E-O.offset),1),O.next);const e=(null==r?void 0:r.current)instanceof a.Object3D?r.current:y;e.position.copy(O.point),l&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(l)?l.current.getWorldPosition(C):l,v,t,b,void 0,d)}})),i.createElement("group",s.default({ref:P},h),i.createElement(f.Provider,{value:O},e,u&&i.createElement(p,null)))}));exports.MotionPathControls=m,exports.useMotion=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@babel/runtime/helpers/extends"),t=require("three"),r=require("react"),n=require("@react-three/fiber"),o=require("maath");function u(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=u(e),a=c(t),i=c(r);const l=i.createContext(null);function f(){const e=i.useContext(l);if(!e)throw new Error("useMotion hook must be used in a MotionPathControls component.");return e}function m({points:e=50,color:t="black"}){const{path:r}=f(),[n,o]=i.useState([]),u=i.useMemo((()=>new a.MeshBasicMaterial({color:t})),[t]),c=i.useMemo((()=>new a.SphereGeometry(.025,16,16)),[]),s=i.useRef([]);return i.useEffect((()=>{r.curves!==s.current&&(o(r.getPoints(e)),s.current=r.curves)})),n.map(((e,t)=>i.createElement("mesh",{key:t,material:u,geometry:c,position:[e.x,e.y,e.z]})))}const p=i.forwardRef((({children:e,curves:t=[],debug:r=!1,debugColor:u="black",object:c,focus:f,loop:p=!0,offset:d,smooth:g=!1,eps:v=1e-5,damping:b=.1,focusDamping:h=.1,maxSpeed:j=1/0,...y},M)=>{const{camera:w}=n.useThree(),P=i.useRef(null),O=i.useRef(null!=d?d:0),x=i.useMemo((()=>new a.CurvePath),[]),C=i.useMemo((()=>({focus:f,object:(null==c?void 0:c.current)instanceof a.Object3D?c:{current:w},path:x,current:O.current,offset:O.current,point:new a.Vector3,tangent:new a.Vector3,next:new a.Vector3})),[f,c]);i.useLayoutEffect((()=>{var e,r;x.curves=[];const n=t.length>0?t:null!==(e=null==(r=P.current)||null==(r=r.__r3f)?void 0:r.objects)&&void 0!==e?e:[];for(let e=0;e<n.length;e++)x.add(n[e]);if(g){const e=x.getPoints("number"==typeof g?g:1),t=new a.CatmullRomCurve3(e);x.curves=[t]}x.updateArcLengths()})),i.useImperativeHandle(M,(()=>Object.assign(P.current,{motion:C})),[C]),i.useLayoutEffect((()=>{O.current=o.misc.repeat(O.current,1)}),[d]);const E=i.useMemo((()=>new a.Vector3),[]);return n.useFrame(((e,t)=>{const r=C.offset;if(o.easing.damp(O,"current",void 0!==d?d:C.current,b,t,j,void 0,v),C.offset=p?o.misc.repeat(O.current,1):o.misc.clamp(O.current,0,1),x.getCurveLengths().length>0){x.getPointAt(C.offset,C.point),x.getTangentAt(C.offset,C.tangent).normalize(),x.getPointAt(o.misc.repeat(O.current-(r-C.offset),1),C.next);const e=(null==c?void 0:c.current)instanceof a.Object3D?c.current:w;e.position.copy(C.point),f&&o.easing.dampLookAt(e,(e=>(null==e?void 0:e.current)instanceof a.Object3D)(f)?f.current.getWorldPosition(E):f,h,t,j,void 0,v)}})),i.createElement("group",s.default({ref:P},y),i.createElement(l.Provider,{value:C},e,r&&i.createElement(m,{color:u})))}));exports.MotionPathControls=p,exports.useMotion=f;

package/core/MotionPathControls.d.ts

@@ -3,8 +3,10 @@ import * as React from 'react';
 type MotionPathProps = JSX.IntrinsicElements['group'] & {
     curves?: THREE.Curve<THREE.Vector3>[];
     debug?: boolean;
+    debugColor?: THREE.ColorRepresentation;
     object?: React.MutableRefObject<THREE.Object3D>;
     focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>;
+    loop?: boolean;
     offset?: number;
     smooth?: boolean | number;
     eps?: number;
@@ -22,6 +24,9 @@ type MotionState = {
     tangent: THREE.Vector3;
     next: THREE.Vector3;
 };
+export type MotionPathRef = THREE.Group & {
+    motion: MotionState;
+};
 export declare function useMotion(): MotionState;
-export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<MotionPathProps, "ref"> & React.RefAttributes<THREE.Group>>;
+export declare const MotionPathControls: React.ForwardRefExoticComponent<Omit<MotionPathProps, "ref"> & React.RefAttributes<MotionPathRef>>;
 export {};

package/core/MotionPathControls.js

@@ -5,21 +5,24 @@ import { useThree, useFrame } from '@react-three/fiber';
 import { misc, easing } from 'maath';
 
 const isObject3DRef = ref => (ref == null ? void 0 : ref.current) instanceof THREE.Object3D;
-const context = /* @__PURE__ */React.createContext(null);
+const MotionContext = /* @__PURE__ */React.createContext(null);
 function useMotion() {
-  return React.useContext(context);
+  const context = React.useContext(MotionContext);
+  if (!context) throw new Error('useMotion hook must be used in a MotionPathControls component.');
+  return context;
 }
 function Debug({
-  points = 50
+  points = 50,
+  color = 'black'
 }) {
   const {
     path
   } = useMotion();
   const [dots, setDots] = React.useState([]);
-  const [material] = React.useState(() => new THREE.MeshBasicMaterial({
-    color: 'black'
-  }));
-  const [geometry] = React.useState(() => new THREE.SphereGeometry(0.025, 16, 16));
+  const material = React.useMemo(() => new THREE.MeshBasicMaterial({
+    color: color
+  }), [color]);
+  const geometry = React.useMemo(() => new THREE.SphereGeometry(0.025, 16, 16), []);
   const last = React.useRef([]);
   React.useEffect(() => {
     if (path.curves !== last.current) {
@@ -27,21 +30,23 @@ function Debug({
       last.current = path.curves;
     }
   });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
+  return dots.map((item, index) => /*#__PURE__*/React.createElement("mesh", {
     key: index,
     material: material,
     geometry: geometry,
     position: [item.x, item.y, item.z]
-  })));
+  }));
 }
 const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   children,
   curves = [],
-  object,
   debug = false,
-  smooth = false,
+  debugColor = 'black',
+  object,
   focus,
+  loop = true,
   offset = undefined,
+  smooth = false,
   eps = 0.00001,
   damping = 0.1,
   focusDamping = 0.1,
@@ -51,9 +56,9 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   const {
     camera
   } = useThree();
-  const ref = React.useRef();
-  const [path] = React.useState(() => new THREE.CurvePath());
+  const ref = React.useRef(null);
   const pos = React.useRef(offset !== null && offset !== void 0 ? offset : 0);
+  const path = React.useMemo(() => new THREE.CurvePath(), []);
   const state = React.useMemo(() => ({
     focus,
     object: (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object : {
@@ -67,12 +72,12 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     next: new THREE.Vector3()
   }), [focus, object]);
   React.useLayoutEffect(() => {
-    var _ref$current;
+    var _r3f$objects, _ref$current;
     path.curves = [];
-    const _curves = curves.length > 0 ? curves : (_ref$current = ref.current) == null ? void 0 : _ref$current.__r3f.objects;
-    for (var i = 0; i < _curves.length; i++) path.add(_curves[i]);
+    const _curves = curves.length > 0 ? curves : (_r3f$objects = (_ref$current = ref.current) == null || (_ref$current = _ref$current.__r3f) == null ? void 0 : _ref$current.objects) !== null && _r3f$objects !== void 0 ? _r3f$objects : [];
+    for (let i = 0; i < _curves.length; i++) path.add(_curves[i]);
 
-    //Smoothen curve
+    // Smoothen curve
     if (smooth) {
       const points = path.getPoints(typeof smooth === 'number' ? smooth : 1);
       const catmull = new THREE.CatmullRomCurve3(points);
@@ -80,24 +85,24 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
     }
     path.updateArcLengths();
   });
-  React.useImperativeHandle(fref, () => ref.current, []);
+  React.useImperativeHandle(fref, () => Object.assign(ref.current, {
+    motion: state
+  }), [state]);
   React.useLayoutEffect(() => {
     // When offset changes, normalise pos to avoid overshoot spinning
     pos.current = misc.repeat(pos.current, 1);
   }, [offset]);
-  let last = 0;
-  const [vec] = React.useState(() => new THREE.Vector3());
+  const vec = React.useMemo(() => new THREE.Vector3(), []);
   useFrame((_state, delta) => {
-    last = state.offset;
+    const lastOffset = state.offset;
     easing.damp(pos, 'current', offset !== undefined ? offset : state.current, damping, delta, maxSpeed, undefined, eps);
-    state.offset = misc.repeat(pos.current, 1);
+    state.offset = loop ? misc.repeat(pos.current, 1) : misc.clamp(pos.current, 0, 1);
     if (path.getCurveLengths().length > 0) {
       path.getPointAt(state.offset, state.point);
       path.getTangentAt(state.offset, state.tangent).normalize();
-      path.getPointAt(misc.repeat(pos.current - (last - state.offset), 1), state.next);
+      path.getPointAt(misc.repeat(pos.current - (lastOffset - state.offset), 1), state.next);
       const target = (object == null ? void 0 : object.current) instanceof THREE.Object3D ? object.current : camera;
       target.position.copy(state.point);
-      //@ts-ignore
       if (focus) {
         easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, focusDamping, delta, maxSpeed, undefined, eps);
       }
@@ -105,9 +110,11 @@ const MotionPathControls = /* @__PURE__ */React.forwardRef(({
   });
   return /*#__PURE__*/React.createElement("group", _extends({
     ref: ref
-  }, props), /*#__PURE__*/React.createElement(context.Provider, {
+  }, props), /*#__PURE__*/React.createElement(MotionContext.Provider, {
     value: state
-  }, children, debug && /*#__PURE__*/React.createElement(Debug, null)));
+  }, children, debug && /*#__PURE__*/React.createElement(Debug, {
+    color: debugColor
+  })));
 });
 
 export { MotionPathControls, useMotion };