How do I apply the curveModifier in R3F?

Questions
, , ,
1

I’m just trying to moveAlong the path of a curve something of my geometry but couldn’t make the curveModifier work.

Based from drcdma the CurveModifier GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

is like this

const curveRef = useRef()

const curve = React.useMemo(() => new THREE.CatmullRomCurve3([...handlePos], true, 'centripetal'), [handlePos])

return (
  <CurveModifier ref={curveRef} curve={curve}>
    <mesh>
      <boxGeometry args={[10, 10]} />
    </mesh>
  </CurveModifier>
)

but I couldn’t make it work with the CurveModifier even I already provide the handlePos so I tried to understand in story. of drcdma storybook

https://drei.pmnd.rs/?path=/story/modifiers-curvemodifier--curve-modifier-st

but I couldn’t find the curveModifierRef thing but here is my code.

Here is the imports.

import {  CurveModifier, Environment, Line, OrbitControls } from '@react-three/drei'
import { Canvas, useFrame, useThree } from '@react-three/fiber'
import React, { useEffect, useMemo, useRef } from 'react'

import * as THREE from 'three'

import { LineBasicMaterial, LineLoop } from 'three'

    const curveRef = useRef<CurveModifierRef>()

    const handlePos = useMemo(
        () =>
            [
                { x: 10, y: 0, z: -10 },
                { x: 10, y: 0, z: 10 },
                { x: -10, y: 0, z: 10 },
                { x: -10, y: 0, z: -10 },
            ].map((hand) => new Vector3(...Object.values(hand))),
        []
    )
    
    const curve = useMemo(() => new CatmullRomCurve3(handlePos, true, 'centripetal'), [handlePos])
    
    const line = useMemo(
        () =>
            new LineLoop(new BufferGeometry().setFromPoints(curve.getPoints(50)), new LineBasicMaterial({ color: 0x00ff00 })),
        [curve]
    )

    useFrame(() => {
        if (curveRef.current) {
        curveRef.current?.moveAlongCurve(0.001)
        }
    })
  
    useEffect(() => {
        geomRef.current.rotateX(Math.PI)
    }, [])

and the display output

    return (
        <>
            {/* <Line ref={lineRef} worldUnits points={points} color={0xfffccc} lineWidth={0.05} rotation={[Math.PI / 2, 0, 0]} />
            <mesh
                position={[0,1,0]}
                ref={sphereMotion}
            >
                <sphereGeometry attach="geometry" />
                <meshStandardMaterial attach="material" color="red" />
            </mesh> */}

            <CurveModifier ref={curveRef} curve={curve}>
                <mesh>
                    <boxGeometry args={[10, 10]} />
                    <meshStandardMaterial attach="material" color="red" />
                </mesh>
            </CurveModifier>

        </>
    )

where do I find the CurveModifier or what’s wrong with this?