setDrawRange flickering when updating start value?

Questions
1

Hello, I’m following a blog post on stripe

They are using animating a tube curve using setDrawRange.
And it works but when I tried to undraw it by updating the start value on draw range the curve keeps flickering?

   const unDrawAnimatedLine = () => {
      let drawRangeCount = 1;
      const timeElapsed = performance.now() - startTime;
      const progress = timeElapsed / 2500;

      drawRangeCount = progress * 3000;

      if (progress < 0.999) {
        console.log(arcRef.current.drawRange);
        arcRef.current.setDrawRange(
          drawRangeCount,
          arcRef.current.drawRange.count
        );
        requestAnimationFrame(unDrawAnimatedLine);
      }
    };
2

Hi! I am having the same issue. Did you figure out a solution?

3

The setDrawRange method specifies a range of vertices to draw when rendering a BufferGeometry object and not the amount of faces. You are most likely seeing faces partly rendered because their vertices have not been set to be drawn.

To fix this, you must ensure that the start range value is a multiple of your “indices per element” (IPE) or vertexes per face. The IPE value for your geometry will vary depending on what type. The geometry faces will most likely be rendered from triangles meaning the vertex and IPE count per element is 3.

Try incrementing your “drawRangeCount” by multiples of three. If not, check your geometry IPC face value and correct accordingly.