Adding points in Line

[jugglingcats]

Hi, firstly thanks for the project!

I am trying to draw a line with width where the path changes based on state. The number of points to be drawn can increase or decrease as state changes.

It seems that the geometry in Line is not updated when the number of points change. I realise this might be related to the way three works and might be desirable from a performance perspective, but if I use the basic r3f line element, the line is updated (presumably by re-creating the geometry) as points are added.

I tried hacking around with onUpdate, similar to how it works with line, but it didn't work.

I created codesandbox showing the issue: https://codesandbox.io/s/r3f-line-adding-points-y7utc?file=/src/index.js

The Line is created with 5 points initially, so you can add up to five points with the Add Point button, but after that new points don't appear.

Any help/workaround much appreciated!

[jugglingcats]

I created a workaround by copying the code in https://github.com/pmndrs/drei/blob/master/src/Line.tsx. Basically creating a new geometry when the points change.

My modified version looks like this (I stripped out some of the params we don't need):

  const TestLine = React.forwardRef(function Line({ points, color = 'black', lineWidth, ...rest }, ref) {
    const [line2] = useState(() => new Line2())
    const [lineMaterial] = useState(() => new LineMaterial())
    const [resolution] = useState(() => new Vector2(512, 512))
    useEffect(() => {
      const geom = new LineGeometry()
      geom.setPositions(points.flat())
      line2.geometry = geom
      line2.computeLineDistances()
    }, [points, line2])

    return (
      <primitive dispose={undefined} object={line2} ref={ref} {...rest}>
        <primitive
          dispose={undefined}
          object={lineMaterial}
          attach="material"
          color={color}
          resolution={resolution}
          linewidth={lineWidth}
          {...rest}
        />
      </primitive>
    )
  })

And in codesandbox... https://codesandbox.io/s/r3f-line-adding-points-workaround-11g9h?file=/src/index.js:1372-2184

In the codesandbox demo there is a perceptible flicker when clicking the buttons but I don't see this in my proper app, so it seems to work pretty well.

[mattrossman]

Were you going to make a PR for this?

[joshuaellis]

I've just had a look at this, I'm curious why it wouldn't update as the component is now. @mattrossman or @jugglingcats do you have any thoughts about this?

[mattrossman]

@joshuaellis I believe there is no straightforward way to dynamically change the number of points in a line in Three.js (see https://stackoverflow.com/q/14840026/8371763), best you can do is pre-allocate a buffer with a maximum number of points and ignore the parts you don't use. Easiest solution seems to be just creating a new geometry as @jugglingcats does

[joshuaellis]

I see, thanks for the insight! I'll work on implementing @jugglingcats' solution. I don't necessarily see an issue with it and it makes the component more "reactive"