useFrame + setDrawRange

[mtergel]

Hello everyone,
I'm trying to make a line appear and disappear, meaning it will start drawing the full line then from to start removing from the start to the end. Like the one in GitHub's globe.

1. Is this even the correct way to draw the line?
2. My line keeps flashing/stuttering when I am removing it from the start, it is fine then we first draw it
3. How do I start some kind of timer using the Clock?

  const geometryRef = useRef<TubeGeometry>(null);

  useFrame((state, delta) => {
    if (geometryRef.current && show) {
      let endNow =
        geometryRef.current.drawRange.count === Infinity
          ? 0
          : geometryRef.current.drawRange.count;

      // check if we drawn it fully
      if (endNow >= geometryRef.current.index!.count) {
        // start timer here
        // todo

        let startNow = geometryRef.current.drawRange.start;

        // remove from start to end
        if (startNow < geometryRef.current.index!.count) {
          geometryRef.current.setDrawRange(
            Math.round(startNow + delta * 30 * 16),
            geometryRef.current.index!.count
          );
        } else {
          // todo
          // when lets say 10 second
          // pass by start the animation again
          // if (delta > 10) {
          //   geometryRef.current.setDrawRange(0, 0);
          // }
        }
      } else {

        // draw from start to end
        geometryRef.current.setDrawRange(
          0,
          Math.round(endNow + delta * 30 * 16)
        );
      }
    }
  });

  return (
    <mesh>
      <tubeBufferGeometry
        ref={geometryRef}
        args={[curve, 32, dotDensity, 4]}
      />
      <meshBasicMaterial color="#E879F9" />
    </mesh>
  );

[drcmda]

it would be much easier to do it like you would on the web, by controlling dash offset https://codesandbox.io/s/bezier-curves-nodes-3k4g6

if you make dash scale and gap as wide as the line itself it's a one liner since you're only rolling the offset up. i think you need the line length for that which you can get inside useLayoutEffect, computeLineDistances or something like that https://threejs.org/docs/index.html?q=line#api/en/objects/Line.computeLineDistances

[mtergel]

Thanks, I'll look into it