How do I pass this bufferGeometry in the lineSegments in reactjs or how can I edit bufferGeometry works

Questions
, ,
1

So basically I saw this one of samples in bufferGeometry and kinda want to translate it to reactjs but I can’t find the way to make it works out. SnowFlakes BufferGeometry

So basically you can see my code here in my codesandbox or maybe just look at here.

First I have boxRef for listing my four mesh

const boxRef = useRef([])

    const selection = [
        [-4.5,0,-4.5],
        [4.5,0,4.5],
        [4.5,0,-4.5],
        [-4.5,0,4.5],
    ]

This is the positions of my mesh Items… and then this is my displaying bufferGeometries

                {selection.map((elem,i) => {
                    return (
                        <mesh
                            position={elem}
                            key={i}
                        >
                            <bufferGeometry
                                // ref={e => boxRef.current.push(e)}
                                
                            />
                            <lineSegments/>
                            {/* <Line worldUnits points={boxRef.current[i]} color="turquoise" lineWidth={0.1} castShadow receiveShadow /> */}
                            {/* <LineBasicMaterial
                                color={0xe3f1ff}
                                vertexColors={true}
                                // specular
                                // side={THREE.BackSide}
                            /> */}
                        </mesh>
                    )
                })}

As you see I tried different aspects of Line materials to get this thing done. but I can’t…So As you see then after that this code is the same as the link that I give wherein I am creating the snowflakes shape geometry style

useEffect(() => {
        boxRef.current.map((elem,i) => {
            const geometry = elem
            // const 
            console.log(geometry)
            const indices = [];
            const positions = [];
            const colors = [];
    
            let next_positions_index = 0;
    
            //
    
            const iteration_count = 4;
            const rangle = 60 * Math.PI / 180.0;
    
            function add_vertex( v ) {
    
                if ( next_positions_index == 0xffff ) console.error( 'Too many points.' );
    
                positions.push( v.x, v.y, v.z );
                colors.push( Math.random() * 0.5 + 0.5, Math.random() * 0.5 + 0.5, 1 );
    
                return next_positions_index ++;
    
            }
    
            // simple Koch curve
    
            function snowflake_iteration( p0, p4, depth ) {
    
                if ( -- depth < 0 ) {
    
                    const i = next_positions_index - 1; // p0 already there
                    add_vertex( p4 );
                    indices.push( i, i + 1 );
    
                    return;
    
                }
    
                const v = p4.clone().sub( p0 );
                const v_tier = v.clone().multiplyScalar( 1 / 3 );
                const p1 = p0.clone().add( v_tier );
    
                const angle = Math.atan2( v.y, v.x ) + rangle;
                const length = v_tier.length();
                const p2 = p1.clone();
                p2.x += Math.cos( angle ) * length;
                p2.y += Math.sin( angle ) * length;
    
                const p3 = p0.clone().add( v_tier ).add( v_tier );
    
                snowflake_iteration( p0, p1, depth );
                snowflake_iteration( p1, p2, depth );
                snowflake_iteration( p2, p3, depth );
                snowflake_iteration( p3, p4, depth );
    
            }
    
            function snowflake( points, loop, x_offset ) {
    
                for ( let iteration = 0; iteration != iteration_count; iteration ++ ) {
    
                    add_vertex( points[ 0 ] );
    
                    for ( let p_index = 0, p_count = points.length - 1; p_index != p_count; p_index ++ ) {
    
                        snowflake_iteration( points[ p_index ], points[ p_index + 1 ], iteration );
    
                    }
    
                    if ( loop ) snowflake_iteration( points[ points.length - 1 ], points[ 0 ], iteration );
    
                    // translate input curve for next iteration
    
                    for ( let p_index = 0, p_count = points.length; p_index != p_count; p_index ++ ) {
    
                        points[ p_index ].x += x_offset;
    
                    }
    
                }
    
            }

            let y = 0;
            // y += 600;
            snowflake(
                [
                    new THREE.Vector3( 0, y, 0 ),
                    new THREE.Vector3( 250, y + 400, 0 ),
                    new THREE.Vector3( 500, y, 0 )
                ],
                true, 600
            );

            geometry.setIndex( indices );
            geometry.setAttribute( 'position', new THREE.Float32BufferAttribute( positions, 3 ) );
            geometry.setAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
            geometry.computeBoundingSphere();
        })
},[ ])

and this is the code that you will see in that link of the source code at the three js examples of buffergeometry. **THIS ACTUALLY WORKS ** but I CAN"T SEE the geometry I don’t know if its because of the lineSegment or whatever it is, can anyone tell me how do I fix this?

2

you can either create buffergeom 1:1 like you would in vanilla, there’s no downside to this. but do it inside a useLayoutEffect, not useEffect, because layout fires before render. or you express it declaratively, it’s up to you

<lineSegments>
  <bufferGeometry
    <bufferAttribute attach="attributes-position" args={[positions, 3]} />
    <bufferAttribute attach="attributes-colors" args={[colors, 3]} />
  </bufferGeometry>
  <lineBasicMaterial color="black" vertexColors />
</lineSegments>

i don’t know if there’s a difference between THREE.BufferAttribute and THREE.Float32BufferAttribute, some examples use on, some the other. but either way, you can declare everything in jsx, the only react-fiber thing here is “attach”.

1 Like
3

heyir, how can I figure out pass those positions and colors that you write on the code? I don’t know how can I pass it…I don’t think using a ref will help me pass the values inside of it. How do I will write that code with the snowflakes outside of useLayoutEffect?? Sorry for disturbance, I can only imagine about passing using ref but i don’t think it will have the same effects since there is attach in those bufferAttributes

4

nvm I got it. I just have to change the code into like tihs

                            <lineSegments >
                                <bufferGeometry ref={e => boxRef.current.push(e)}/>
                                <lineBasicMaterial color={"black"} vertexColors/>
                            </lineSegments>