Errors in segments document

[Densyakun]

• @react-three/drei@10.7.6
• @react-three/fiber@9.4.0
• three@0.180.0
• node version: v22.17.1
• npm (or yarn) version: npm@11.5.2

Problem description:

The Ref based Segments documentation does not include the start and end attributes,
but executing this code results in an error.

Relevant code:

Due to an error, ReactDOM.render could not be used in codesandbox,
so I will only provide the TSX code:

import { Canvas, useFrame } from '@react-three/fiber'
import './App.css'
import { OrbitControls, Segment, SegmentObject, Segments } from '@react-three/drei'
import { useRef } from 'react'

function RefBasedSegments() {
  const ref = useRef<SegmentObject>(null)

  useFrame(({ clock }) => {
    if (!ref.current) return

    ref.current.start.set(0, Math.cos(clock.elapsedTime), 0)
    ref.current.end.set(10, Math.sin(clock.elapsedTime), 0)
    ref.current.color.setRGB(0, 0, 0)
  })

  return <Segments
    limit={1000}
    lineWidth={1.0}
  >
    <Segment ref={ref} />
  </Segments>;
}

function App() {
  return <Canvas>
    <ambientLight intensity={Math.PI / 2} />
    <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={Math.PI} />
    <pointLight position={[-10, -10, -10]} decay={0} intensity={Math.PI} />
    <RefBasedSegments />
    <OrbitControls />
  </Canvas>
}

export default App

Suggested solution:

The Segment component requires the start and end attributes to be set.
The correct code is as follows:

...
<Segment ref={ref} start={[0, 0, 0]} end={[0, 0, 0]} />
...

Using useEffect instead of useFrame causes re-rendering,
so memoization of the Segment component is necessary to avoid re-rendering.
Without memoization, re-rendering will reset the vertices.

useEffect is slower than useFrame,
so the documentation should explicitly state that vertices and colors should be modified within useFrame,
or that the Segment component must be memoized when using useEffect.

[DennisSmolek]

They are intentionally not there and updated in the frameloop

[Densyakun]

That is not a reason to close the issue.

Do you understand this issue?

I understand that the start and end attributes do not exist on the Segment element because they are set within the frame loop.

However, the problem is that executing that code causes an error, making Segment unusable.

You need to either add start and end attributes to the document or fix the bug so it works even without start and end attributes.

[DennisSmolek]

That is not a reason to close the issue.

Do you understand this issue?

I understand that the start and end attributes do not exist on the Segment element because they are set within the frame loop.

However, the problem is that executing that code causes an error, making Segment unusable.

You need to either add start and end attributes to the document or fix the bug so it works even without start and end attributes.

Next time please post a reproduction, even then sometimes people wont go through the issue. I happen to be in the middle of Drei so I tried it.

I've updated v11 types and components to support this