Difficulty creating basic Line (@react-three/fiber and Typescript)

Question

Can anyone help me get this line to show up? Im using @react-three/fiber and Typescript

My Faulty Component:


import * as THREE from 'three'

const RoadLine = ({start, end}: {start: THREE.Vector3, end: THREE.Vector3}) => {

    return (
        <line>
            <bufferGeometry setFromPoints={() => new THREE.BufferGeometry().setFromPoints([start, end])}/>
            <lineBasicMaterial color={'green'}/>
        </line>
    )
}

export default RoadLine


------------------------------------------------------------------------------------------

The Props Im sending in: 

{roads?.map(road => {
                        return (
                            <RoadLine
                            key={road.id}
                            start={new THREE.Vector3(1,0,3)} //numbers just for test atm
                            end={new THREE.Vector3(11,0,33)} //numbers just for test atm
                            />
                        )
                    })}

Im trying to make a basic line from point a to b essentially, not sure if I'm going about it correctly

score 7 · Answer 1 · edited Aug 06 '21 at 22:16

I was struggling with this until I came across this response from Paul Henschel.

It becomes easier if you don't think of [line] as a wrapper or an abstraction. the jsx you write is threejs. if you write a line in threejs you can make it in jsx. but you're mixing up props and functions. THREE.BufferGeometry.setPoints is a function, and you overwrite it. in react/jsx does not call onClick, it sets it. you can't call a function declaratively, you do that as a side effect in either useEffect or useLayoutEffect. you use the latter if you want to call your function before the thing renders on screen.

He linked this codesandbox, I will post the code here as well. https://codesandbox.io/s/basic-demo-forked-e46t9?file=/src/App.js

import * as THREE from 'three'
import React, { useLayoutEffect, useRef } from 'react'
import { Canvas } from '@react-three/fiber'

function Line({ start, end }) {
  const ref = useRef()
  useLayoutEffect(() => {
    ref.current.geometry.setFromPoints([start, end].map((point) => new THREE.Vector3(...point)))
  }, [start, end])
  return (
    <line ref={ref}>
      <bufferGeometry />
      <lineBasicMaterial color="hotpink" />
    </line>
  )
}

export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <Line start={[0, 0, 0]} end={[1, 0, 0]} />
      <Line start={[1, 0, 0]} end={[1, 1, 0]} />
    </Canvas>
  )
}

When start and end are arrays, using them as conditioning on the useEffect of layoutEffect can often trigger excessive re-renders. The proper pattern is to spread those two variables with a default value = [ ] useLayoutEffect(() => { if (ref.current) { ref.current.geometry.setFromPoints([start, end].map((point) => new Vector3(...point))); } }, [...(start || []), ...(end || [])]) — episodeyang, May 04 '23 at 08:25

score 1 · Answer 2 · answered Feb 15 '22 at 22:21

our friend's answer almost works, but for the typescript some tweaking is needed:

import * as THREE from 'three'
import React, { useRef } from 'react'
import { Canvas, useFrame } from '@react-three/fiber'

type props = {
    start: number[],
    end: number[]
}

function Line (props: props) {
    const ref = useRef<THREE.Line>()

    useFrame(() => {
        if(ref.current){
            ref.current.geometry.setFromPoints([props.start, props.end].map((point) => new THREE.Vector3(...point)));
        }
    })
    return (
        <line ref={ref}>
            <bufferGeometry />
            <lineBasicMaterial color="hotpink"/>
        </line>
    )
}


export default function App() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
      <pointLight position={[-10, -10, -10]} />
      <Line start={[0,0,0]} end={[1,1,0]} />
      <Line start={[1,1,0]} end={[2,0,0]} />
    </Canvas>
  )
}

Applying the `if (ref.current)` check to the TypeScript version of the [basic docs example](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction#what-does-it-look-like) worked for me after installing the types via `npm install -D @types/three`. Maybe that's an obvious step but I didn't see it documented anywhere. — abettermap, Mar 05 '22 at 00:45
Oh also `props: JSX.IntrinsicElements['mesh']` may have helped (or `props: JSX.IntrinsicElements['line']` in OP's example. — abettermap, Mar 05 '22 at 01:05
This is really bad. the vectors are created repetitively on each frame. Please take a look at examples in drei for reference. — episodeyang, May 04 '23 at 08:20

episodeyang · Answer 3 · 2023-05-04T16:32:58.933

Both two answers contain known anti-patterns that should be avoided.

@william's puts Vector3 instantiation in a useFrame. This is bad and should be avoided as much as possible. See implementation examples in both drei and three.js code base.
@sean's answer condition on start and end. This often leads to re-render when these two variables are re-constructed, even though they contain the same value.
Both answers use map to instantiate the points. This is not a good style unless you are trying to accommodate more than two points

Instead of implementing your own, I recommend using the Line component from drei. they use instancing to improve performance, and accommodate multiple segments. See below:

import {
  Line,
} from "@react-three/drei";

export Example = ({cx, cy, distance}) => (
     <Line
        points={[
          [-cx, -cy, -distance],
          [cx, -cy, -distance],
          [cx, cy, -distance],
          [-cx, cy, -distance],
          [-cx, -cy, -distance],
        ]}       // Array of points, Array<Vector3 | Vector2 | [number, number, number] | [number, number] | number>
        color={"#23aaff"}                   // Default
        lineWidth={1}                   // In pixels (default)
        // segments                        // If true, renders a THREE.LineSegments2. Otherwise, renders a THREE.Line2
      />
)

Difficulty creating basic Line (@react-three/fiber and Typescript)

3 Answers3