Using THREE.MeshLine library with react-three-renderer

[Venryx]

How would one use the THREE.MeshLine library with react-three-renderer?

This was my attempt:

class MeshLineExample extends React.Component {
    render() {
        let meshLine = new MeshLine();

        var geometry = new THREE.Geometry();
        geometry.vertices = this.props.vertices;
        meshLine.setGeometry(geometry);

        var material = new MeshLineMaterial({});

        return (
            <mesh position={new THREE.Vector3(0, 0, 0)} rotation={new THREE.Euler()}
                geometry={geometry} material={material}/>
        );
    }
}

However, when I do this, nothing displays.

Also, I get these warnings in the console: "Warning: Foreign prop geometry found in mesh. Check the render method of MeshLineExample." "Warning: updating prop geometry ( [object Object] ) for MeshDescriptor"

I don't understand this, though, because I looked at the source code, and MeshDescriptor appears to supposed to be able to accept geometry and material props: https://github.com/toxicFork/react-three-renderer/blob/master/src/lib/descriptors/Object/MeshDescriptor.js#L9

Any tips on how to supply the <mesh> component/descriptor with a custom geometry and material?

[Venryx]

Oh, apparently the code above is (basically) correct; I've got it working now.

I just needed to use: <mesh [...] geometry={meshLine.geometry} material={material}/> Instead of: <mesh [...] geometry={geometry} material={material}/>

However, there is still the (minor) issue of those warnings shown in the console; I suppose the MeshDescriptor class needs to have this.hasProps(...) calls in its constructor, for the optional geometry and material props.