Converting Threejs example into r3f

Questions
1

Hi there,

I’m attempting to replicate a threejs example (https://threejs.org/examples/?q=lines#webgl_lines_fat_wireframe) in r3f.

Any time I attempt to run my application I get a white screen and the following error:

THREE.WebGLRenderer: Context Lost.

Here is what I have so far:

const IcosahedronShape = () => {

    let geo = new IcosahedronGeometry( 20, 1 );
    const geometry = new WireframeGeometry2( geo );
    let matLine = new LineMaterial({
        color: 0x4080ff,
        linewidth: 5, // in pixels
        //resolution:  // to be set by renderer, eventually
        dashed: false
    });

    let wireframe = new Wireframe( geometry, matLine );
    wireframe.computeLineDistances();
    wireframe.scale.set( 1, 1, 1 );

    return (
        <wireframe />
    )
}

I’m new to both Threejs and r3f so would really appreciate any guidance here.

Thanks!

2

that’s not how it works im afraid. look into this: React Three Fiber Documentation

but i’d start with basics, get comfortable with jsx and hooks first. you shouldn’t have to guess, if you learn react, which should take a few hours, you can just write out three without having to learn that much more except maybe a few semantics like extend and attach.