feat: update CurveModifier ref api (#2236)

pmndrs · Jan 15, 2025 · 1a79a03 · 1a79a03
1 parent 1d62184
commit 1a79a03
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 11 deletions.
diff --git a/docs/modifiers/curve-modifier.mdx b/docs/modifiers/curve-modifier.mdx
@@ -5,13 +5,24 @@ sourcecode: src/core/CurveModifier.tsx
 
 [![](https://img.shields.io/badge/-storybook-%23ff69b4)](https://drei.pmnd.rs/?path=/story/modifiers-curvemodifier)
 
-Given a curve will replace the children of this component with a mesh that move along said curve calling the property `moveAlongCurve` on the passed ref. Uses [three's Curve Modifier](https://threejs.org/examples/#webgl_modifier_curve)
+Given a curve will replace the children of this component with a mesh that move along said curve calling the property `moveAlongCurve` or modifying the `uniforms.pathOffset` value on the passed ref. Uses [three's Curve Modifier](https://threejs.org/examples/#webgl_modifier_curve)
 
-```jsx
-const curveRef = useRef()
+```tsx
+const curveRef = useRef<CurveModifierRef>()
+const scroll = useScroll()
 
 const curve = React.useMemo(() => new THREE.CatmullRomCurve3([...handlePos], true, 'centripetal'), [handlePos])
 
+useFrame(() => {
+  if (curveRef.current) {
+    // Move continuously along the curve
+    curveRef.current.moveAlongCurve(0.001)
+
+    // Move along the curve using the scrollbar
+    curveRef.current.uniforms.pathOffset.value = scroll.offset
+  }
+})
+
 return (
   <CurveModifier ref={curveRef} curve={curve}>
     <mesh>
@@ -20,3 +31,26 @@ return (
   </CurveModifier>
 )
 ```
+
+## Reference api
+
+```tsx
+type CurveModifierRef = {
+  curveArray: Curve<any>[];
+  curveLengthArray: number[];
+  object3D: TMesh;
+  splineTexure: DataTexture;
+  uniforms: CurveModifierUniforms;
+  updateCurve<TCurve extends Curve<any>>(index: number, curve: TCurve): void;
+  moveAlongCurve(amount: number): void;
+}
+
+type CurveModifierUniforms = {
+  spineTexture: IUniform<DataTexture>;
+  pathOffset: INumericUniform;
+  pathSegment: INumericUniform;
+  spineOffset: INumericUniform;
+  spineLength: INumericUniform;
+  flow: INumericUniform;
+}
+```
diff --git a/src/core/CurveModifier.tsx b/src/core/CurveModifier.tsx
@@ -9,15 +9,15 @@ export interface CurveModifierProps {
   curve?: THREE.Curve<THREE.Vector3>
 }
 
-export type CurveModifierRef = Pick<Flow, 'moveAlongCurve'>
+export type CurveModifierRef = Flow
 
 export const CurveModifier: ForwardRefComponent<CurveModifierProps, CurveModifierRef> =
   /* @__PURE__ */ React.forwardRef(({ children, curve }: CurveModifierProps, ref) => {
     const [scene] = React.useState(() => new THREE.Scene())
     const [obj, set] = React.useState<THREE.Object3D>()
-    const modifier = React.useRef<Flow>()
+    const modifier = React.useRef<Flow>(null!)
 
-    React.useEffect(() => {
+    React.useLayoutEffect(() => {
       modifier.current = new Flow(
         scene.children[0] as THREE.Mesh<THREE.BufferGeometry, THREE.Material | THREE.Material[]>
       )
@@ -28,11 +28,7 @@ export const CurveModifier: ForwardRefComponent<CurveModifierProps, CurveModifie
       if (curve) modifier.current?.updateCurve(0, curve)
     }, [curve])
 
-    React.useImperativeHandle(ref, () => ({
-      moveAlongCurve: (val: number) => {
-        modifier.current?.moveAlongCurve(val)
-      },
-    }))
+    React.useImperativeHandle(ref, () => modifier.current)
 
     return (
       <>