@react-three/drei 9.84.0 → 9.84.1

package/README.md

@@ -754,54 +754,59 @@ useFrame((_, delta) => {
 #### MotionPathControls
 
 <p>
-  <a href="https://codesandbox.io/s/drei-motion-path-controls-d9x4yf"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/drei-motion-path-n75jcq/screenshot.png" alt="Demo"/></a>
+  <a href="https://codesandbox.io/s/2y73c6"><img width="20%" src="https://codesandbox.io/api/v1/sandboxes/2y73c6/screenshot.png" alt="Demo"/></a>
 </p>
 
 Motion path controls, it takes a path of bezier curves or catmull-rom curves as input and animates the passed `object` along that path. It can be configured to look upon an external object for staging or presentation purposes by adding a `focusObject` property (ref).
 
 ```tsx
 type MotionPathProps = JSX.IntrinsicElements['group'] & {
-  curves?: THREE.Curve[] // The curves from which the curve path is constructed, default: []
-  debug?: boolean // show the path on which the object animates, default: false
-  object?: React.MutableRefObject<THREE.Object3D> // default: default camera
-  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D> // default: undefined
-  offset?: number // manually progress the object along the path (0 - 1), default: undefined
-  smooth?: boolean // whether or not to smooth out the curve path, default: false
-  eps?: number // End of animation precision, default: 0.00001
-  damping?: number // Approximate time to reach the target. A smaller value will reach the target faster. default: 0.1
-  maxSpeed?: number // Optionally allows you to clamp the maximum speed. default: Infinity
+  /** An optional array of THREE curves */
+  curves?: THREE.Curve<THREE.Vector3>[]
+  /** Show debug helpers */
+  debug?: boolean
+  /** The target object that is moved, default: null (the default camera) */
+  object?: React.MutableRefObject<THREE.Object3D>
+  /** An object where the target looks towards, can also be a vector, default: null */
+  focus?: [x: number, y: number, z: number] | React.MutableRefObject<THREE.Object3D>
+  /** Position between 0 (start) and end (1), if this is not set useMotion().current must be used, default: null */
+  offset?: number
+  /** Optionally smooth the curve, default: false */
+  smooth?: boolean | number
+  /** Damping tolerance, default: 0.00001 */
+  eps?: number
+  /** Damping factor for movement along the curve, default: 0.1 */
+  damping?: number
+  /** Damping factor for lookAt, default: 0.1 */
+  focusDamping?: number
+  /** Damping maximum speed, default: Infinity */
+  maxSpeed?: number
 }
 ```
 
-```jsx
-const poi = useRef()
-
-function Loop({ factor = 0.2 }) {
-  const motion = useMotion()
-  useFrame((state, delta) => (motion.current += delta * factor))
-}
-
-<MotionPathControls
-  focus={poi}
-  damping={0.2}
->
-  <cubicBezierCurve3 v0={[-5, -5, 0]} v1={[-10, 0, 0]} v2={[0, 3, 0]} v3={[6, 3, 0]} />
-  <cubicBezierCurve3 v0={[6, 3, 0]} v1={[10, 5, 5]} v2={[5, 5, 5]} v3={[5, 5, 5]} />
-  <Loop />
-</MotionPathControls>
-  
-<Box args={[1, 1, 1]} ref={poi}/>
+You can use MotionPathControls with declarative curves.
 
+```jsx
+function App() {
+  const poi = useRef()
+  return (
+    <group>
+      <MotionPathControls offset={0} focus={poi} damping={0.2}>
+        <cubicBezierCurve3 v0={[-5, -5, 0]} v1={[-10, 0, 0]} v2={[0, 3, 0]} v3={[6, 3, 0]} />
+        <cubicBezierCurve3 v0={[6, 3, 0]} v1={[10, 5, 5]} v2={[5, 5, 5]} v3={[5, 5, 5]} />
+      </MotionPathControls>
+      <Box args={[1, 1, 1]} ref={poi}/>
 ```
 
-```jsx
-const poi = useRef()
+Or with imperative curves.
 
+```jsx
 <MotionPathControls
+  offset={0}
   focus={poi}
   damping={0.2}
   curves={[
-      new THREE.CubicBezierCurve3(
+    new THREE.CubicBezierCurve3(
       new THREE.Vector3(-5, -5, 0),
       new THREE.Vector3(-10, 0, 0),
       new THREE.Vector3(0, 3, 0),
@@ -813,12 +818,50 @@ const poi = useRef()
       new THREE.Vector3(5, 3, 5),
       new THREE.Vector3(5, 5, 5)
     ),
-  ]}          
+  ]}
 />
+```
+
+You can exert full control with the `useMotion` hook, it allows you to define the current position along the path for instance, or define your own lookAt. Keep in mind that MotionPathControls will still these values unless you set damping and focusDamping to 0. Then you can also employ your own easing.
 
-<Box args={[1, 1, 1]} ref={poi}/>
+```tsx
+type MotionState = {
+  /** The user-defined, mutable, current goal position along the curve, it may be >1 or <0 */
+  current: number
+  /** The combined curve */
+  path: THREE.CurvePath<THREE.Vector3>
+  /** The focus object */
+  focus: React.MutableRefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined
+  /** The target object that is moved along the curve */
+  object: React.MutableRefObject<THREE.Object3D<THREE.Event>>
+  /** The automated, 0-1 normalised and damped current goal position along curve */
+  offset: number
+  /** The current point on the curve */
+  point: THREE.Vector3
+  /** The current tangent on the curve */
+  tangent: THREE.Vector3
+  /** The next point on the curve */
+  next: THREE.Vector3
+}
+
+const state: MotionState = useMotion()
 ```
 
+```jsx
+function Loop() {
+  const motion = useMotion()
+  useFrame((state, delta) => {
+    // Set the current position along the curve, you can increment indiscriminately for a loop
+    motion.current += delta
+    // Look ahead on the curve
+    motion.object.lookAt(motion.next)
+  })
+}
+
+<MotionPathControls>
+  <cubicBezierCurve3 v0={[-5, -5, 0]} v1={[-10, 0, 0]} v2={[0, 3, 0]} v3={[6, 3, 0]} />
+  <Loop />
+```
 
 # Gizmos
 
@@ -1205,13 +1248,13 @@ export type FacemeshProps = {
   /** a landmark index (to get the position from) or a vec3 to be the origin of the mesh. default: undefined (ie. the bbox center) */
   origin?: number | THREE.Vector3
   /** A facial transformation matrix, as returned by FaceLandmarkerResult.facialTransformationMatrixes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  facialTransformationMatrix?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes[0]
+  facialTransformationMatrix?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.facialTransformationMatrixes)[0]
   /** Apply position offset extracted from `facialTransformationMatrix` */
   offset?: boolean
   /** Offset sensitivity factor, less is more sensible */
   offsetScalar?: number
   /** Fface blendshapes, as returned by FaceLandmarkerResult.faceBlendshapes (see: https://developers.google.com/mediapipe/solutions/vision/face_landmarker/web_js#handle_and_display_results) */
-  faceBlendshapes?: typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes[0]
+  faceBlendshapes?: (typeof FacemeshDatas.SAMPLE_FACELANDMARKER_RESULT.faceBlendshapes)[0]
   /** whether to enable eyes (nb. `faceBlendshapes` is required for), default: true */
   eyes?: boolean
   /** Force `origin` to be the middle of the 2 eyes (nb. `eyes` is required for), default: false */
@@ -2904,7 +2947,7 @@ function SuzanneFBX() {
   let fbx = useFBX('suzanne/suzanne.fbx')
   return <primitive object={fbx} />
 }
-````
+```
 
 #### useTexture
 

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,lookupDamping: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 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;

package/core/MotionPathControls.d.ts

@@ -1,10 +1,10 @@
 import * as THREE from 'three';
 import * as React from 'react';
 type MotionState = {
+    current: number;
     path: THREE.CurvePath<THREE.Vector3>;
     focus: React.MutableRefObject<THREE.Object3D<THREE.Event>> | [x: number, y: number, z: number] | undefined;
     object: React.MutableRefObject<THREE.Object3D<THREE.Event>>;
-    current: number;
     offset: number;
     point: THREE.Vector3;
     tangent: THREE.Vector3;

package/core/MotionPathControls.js

@@ -12,7 +12,6 @@ function useMotion() {
 function Debug({
   points = 50
 }) {
-  //@ts-ignore
   const {
     path
   } = useMotion();
@@ -45,7 +44,7 @@ const MotionPathControls = /*#__PURE__*/React.forwardRef(({
   offset = undefined,
   eps = 0.00001,
   damping = 0.1,
-  lookupDamping = 0.1,
+  focusDamping = 0.1,
   maxSpeed = Infinity,
   ...props
 }, fref) => {
@@ -100,7 +99,7 @@ const MotionPathControls = /*#__PURE__*/React.forwardRef(({
       target.position.copy(state.point);
       //@ts-ignore
       if (focus) {
-        easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, lookupDamping, delta, maxSpeed, undefined, eps);
+        easing.dampLookAt(target, isObject3DRef(focus) ? focus.current.getWorldPosition(vec) : focus, focusDamping, delta, maxSpeed, undefined, eps);
       }
     }
   });