How do you update ThreeJS objects based on parameter changes?

Question

To elaborate I am using React, ThreeJS, React-Three-Fibre

I want to create 100 points, but I am struggling to understand how I can go about it with the React-Three-Fibre API. My first thought was that based on the syntax I could add <Point> as a DOM element to the <mesh> element. In terms of DOM elements it's just a canvas with drawings in it so I realize it's not a valid approach.

Another issue I am having is when setting pre determined positions from some function, the elements get rendered before the function is executed so they never get added. Once the function finishes executing I suppose I would have to update the canvas to reflect the positional, etc changes.

I tried updating the canvas in the form of

useFrame((state) => (meshRef.forceUpdate());

But that is not a function so I'm lost on how I can go about updating the Points with new positions

const PointerStar = () => {

    // This reference gives us direct access to the THREE.Mesh object
    const meshRef = useRef()

    // This reference gives us direct access to the points container
    const pointsRef = useRef()

    // Hold state for hovered and clicked events
    const [hovered, setHovered] = useState(false)
    const [clicked, setClicked] = useState(false)

    // Buffers
    let positionsBuffer = []
    let positionsBuffer2 = [1, 1, 1]
    let colorsBuffer = []
    let sizesBuffer = []

    const buffer_arrays_populate = () => {
        positionsBuffer.push(-3,0,0)
        colorsBuffer.push(125, 213, 12)
        sizesBuffer.push(2)

        console.log(positionsBuffer)
        console.log(colorsBuffer)
        console.log(sizesBuffer)
    }

    useEffect(() => {
        buffer_arrays_populate();
    },[])
    
    return (
        <mesh ref={meshRef}>
            <Points limit={3} ref={pointsRef}>
                <Point position={positionsBuffer}/>
                <Point position={[3, 0, 0]}/>
            </Points>
        </mesh>
    )

How do you update ThreeJS objects based on parameter changes?

0 Answers0