edgesGeometry not working as expected

[ikteru]

I'm trying to display a bounding box using the edgesGeometry component. But it's not working as you would expect.
Basically I'm trying to reproduce the same results I got in this fiddle: https://jsfiddle.net/d524eb3x/8/

I implemented the exact same example code in the official three js docs here: <
https://threejs.org/docs/index.html#api/en/geometries/EdgesGeometry

And it works as expected as you can see in the fiddle.

Now the question is: how do I get the same results with react-three-fiber ?

My attempt at answering that question is detailed in this simple sandbox :
https://codesandbox.io/s/exciting-sanderson-jfbwx?file=/src/App.js

[jvfresco]

Hi,
That's the closest I could get. Declaring the geometry as a child of edgesGeometry results in an error.
Maybe someone could clarify
If you expect rerendering of the cube, you should declare it using useMemo
https://codesandbox.io/s/fast-water-zz1dx

[drcmda]

This is not how it works. The docs say it must receive the geometry in the class constructor. That is "args" in r3f, but it makes handling edgesgeom declaratively extremely cumbersome because it works against react (you want to put a reference into an element before render, but references only exist after render). You're passing it as a child anyway, which has no effect. "children" in threejs is different from the constructor:

// constructor
const foo = new THREE.Foo(constructorArg)
<foo args={[constructorArg]}/>

// children
foo.add(bar)
<foo>
  <bar />
</foo>

one way to do this is useUpdate, which is just a shortcut for useLayoutEffect:

const geo = useRef()
const seg = useRef()
useLayoutEffect(() => seg.current.geometry = new THREE.EdgesGeometry(geo.current), [])
return (
  <mesh>
    <boxBufferGeometry ref={geo} />
    <lineSegments ref={seg} />
  </mesh>

layouteffect because it makes it happen before paint. it doesnt render wrong for a frame, no flashes.

https://codesandbox.io/s/r3f-basic-demo-forked-hutul?file=/src/App.js