SplineCurve through TubeGeometry

[genekogan]

I am trying to render a tube geometry whose trajectory follows an arbitrary spline curve.

I made the below working component mainly from the TubeGeometry example in the three.js documenation.

class CustomSinCurve extends THREE.Curve {
  constructor( scale = 1 ) {
    super();
    this.scale = scale;
  }
  getPoint( t, optionalTarget = new THREE.Vector3() ) {
    const tx = t * 3 - 1.5;
    const ty = Math.sin( 2 * Math.PI * t );
    const tz = 0;
    return optionalTarget.set( tx, ty, tz ).multiplyScalar( this.scale );
  }
}

function MyComponent({ color, ...props }) {
  const ref = useRef();
  const [r] = useState(() => Math.random() * 10000);

  // animates the bouncing effect
  useFrame(
    (_) =>
      (ref.current.position.y = -1.75 + Math.sin(_.clock.elapsedTime + r) / 10)
  );

  const path = new CustomSinCurve( 300 );

  const geom = useMemo(
    () =>
      new THREE.TubeGeometry(
        path, 200, 20, 8, false
      ),
    []
  );

  return (
    <group ref={ref}>
      <mesh geometry={geom} {...props}>
        <meshBasicMaterial color={color} toneMapped={false} />
      </mesh>
    </group>
  );
}

Now I'd like to replace the CustomSinCurve points with an arbitrary curve (ideally a spline curve). I tried using THREE.SplineCurve like this:

// Children Geometry
function MyComponent({ color, ...props }) {
  const ref = useRef();
  const [r] = useState(() => Math.random() * 10000);

  // animates the bouncing effect
  useFrame(
    (_) =>
      (ref.current.position.y = -1.75 + Math.sin(_.clock.elapsedTime + r) / 10)
  );

  const myCurve = new THREE.SplineCurve( [
    new THREE.Vector3( -0.1, 0, 0 ),
    new THREE.Vector3( 0.29, -0.25, 0 ),
    new THREE.Vector3( -0.5, 0.5, 0 ),
    new THREE.Vector3( -0.19, .35, 0 ),
    new THREE.Vector3( 0, 0, 0 ),
    new THREE.Vector3( 0.5, -0.5, 0 ),
    new THREE.Vector3( 0.75, 0.75, 0 ),
    new THREE.Vector3( 0.1, 0, 0 ),
    new THREE.Vector3( -0.75, 0.79, 0 )    
  ]);  
  const path = new THREE.Curve(myCurve.getPoints(50));
  path.scale = 300
  
  const geom = useMemo(
    () =>
      new THREE.TubeGeometry(
        path, 200, 20, 8, false
      ),
    []
  );

  return (
    <group ref={ref}>
      <mesh geometry={geom} {...props}>
        <meshBasicMaterial color={color} toneMapped={false} />
      </mesh>
    </group>
  );
}

However, this leads to an error on instantiating the geom object:

TypeError: Cannot read property 'distanceTo' of null
Curve.getLengths
node_modules/three/build/three.module.js:30155

Can someone suggest what I am doing wrong or correct my code? Thank you. 🙏