Render Function

[flashpixx]

Hello,
I'm new with React Fibre and try convert plain Three.js code into the React structure and I need a little bit help.
I'm using this example https://www.pentacreation.com/blog/2020/10/201009.html
and my current solution with Next-UI is

"use client"

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

function Lines(props: {
    length: number
    segment: number
    segmentCount: number
    lineIndex: number
    lineCount: number
}) {
    const ref = useRef<THREE.Line>()
    useFrame(() => {
        if (!ref.current) return

        const points = []

        for (let j = 0; j <= props.segmentCount; j++) {
            const y = 0
            const x = (props.length / props.segment) * j - props.length / 2
            const z = props.lineIndex * 0.3 - (props.lineCount * 0.3) / 2
            points.push(new THREE.Vector3(x, y, z))
        }

        ref.current.geometry.setFromPoints(points)
    })
    return (
        <line ref={ref}>
            <bufferGeometry />
            <lineBasicMaterial />
        </line>
    )
}

export default function Waves() {
    return (
        <div className={"w-full h-full absolute top-0 left-0 z-0"}>
            <Canvas>
                <ambientLight intensity={0.5} />
                <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} />
                <pointLight position={[-10, -10, -10]} />
                <Lines length={10} segment={0} segmentCount={100} lineIndex={0} lineCount={50} />
            </Canvas>
        </div>
    )
}

How can I add the rendering function with the logic? Thanks a lot for help

[flashpixx]

I have modified my code in that way:

"use client"

import * as THREE from "three"
import React, {ComponentPropsWithoutRef, useMemo, useRef, useState} from "react"
import {Canvas, useFrame} from "@react-three/fiber"
import {ValueNoise} from "value-noise-js/dist/value-noise"

function WaveLine(props: {
    length: number
    segmentCount: number
    lineIndex: number
    lineCount: number
}) {
    const geom = useMemo(() => {
        const points = []

        for (let j = 0; j <= props.segmentCount; j++) {
            const x = (props.length / props.segmentCount) * j - props.length / 2
            const y = 0
            const z = props.lineIndex * 0.3 - (props.lineCount * 0.3) / 2
            points.push(x, y, z)
        }

        const g = new THREE.BufferGeometry()
        g.setAttribute("position", new THREE.Float32BufferAttribute(points, 3))
        return g
    }, [props.length, props.lineCount, props.lineIndex, props.segmentCount])
    return (
        <line geometry={geom}>
            <lineBasicMaterial />
        </line>
    )
}

function WaveAnimation(props: {
    length: number
    segmentCount: number
    lineCount: number
    amplitude: number
}) {
    const ref = useRef()
    const noise = new ValueNoise(undefined, undefined, "perlin")
    const [arr] = useState(() => {
        return [...Array(props.lineCount)].map((_, i) => (
            <WaveLine
                key={i}
                length={props.length}
                segmentCount={props.segmentCount}
                lineIndex={i}
                lineCount={props.lineCount}
            />
        ))
    })

    useFrame((state, delta) => {
        for (let i = 0; i < props.lineCount; i++) {
            const line = arr[i].props
            const position = line.geometry.attributes.position
            const time = Date.now() / 4000

            for (let j = 0; j <= props.segmentCount; j++) {
                const px = j / (50 + i)
                const py = i / 50 + time

                const x = (props.length / props.segmentCount) * j - props.length / 2
                const y = props.amplitude * noise.evalXY(px, py)
                const z = i * 0.3 - (props.lineCount * 0.3) / 2
                position[j * 3].x = x
                position[j * 3 + 1].y = y
                position[j * 3 + 2].z = z
            }

            const h = Math.round((i / props.lineCount) * 360)
            const s = 100
            const l = Math.round((i / props.lineCount) * 100)
            line.material.color = new THREE.Color(`hsl(${h},${s}%,${l}%)`)
            position.needsUpdate = true
        }
    })

    return <mesh ref={ref}>{arr}</mesh>
}

function Scene() {
    return (
        <Canvas>
            <ambientLight intensity={0.5} />
            <WaveAnimation amplitude={5} length={100} lineCount={50} segmentCount={100} />
        </Canvas>
    )
}

export default function Waves(props: ComponentPropsWithoutRef<"div">) {
    return (
        <div {...props}>
            <Scene />
        </div>
    )
}

But I cannot get access to the line position attribute, so hat I can modify the position within the line. How can I get access ti the position attribute of the line?