How do I render the outline of a cube?

[denizs]

Forgive me for that trivial question but I've been trying to wrap my head around this for almost an hour now. If I recall correctly, I can create a vanilla threejs edge geometry like so:

const geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
const edges = new THREE.EdgesGeometry( geometry );
let line = new THREE.LineSegments( edges, new THREE.LineBasicMaterial( { color: 0xffffff } ) );
scene.add( line );

The docs don't really explain how I am supposed to compose my components so that this works. It says that edgesGeometry needs a geometry attribute, but when I pass one, I get an error.
Could anyone help me out real quick?
Cheers

[johnrees]

Your code works https://jsbin.com/sejekal/edit?html,js,output

[denizs]

Yeah right, but how do I implement this with R3R? 🤣
I don't understand how I can implement this using the components.
My approach was basically composing a HOC like so:

<lineSegments>
   <edgesGeometry>
      <bufferGeometry>
          <boxGeometry {...props} />
      </bufferGeometry>
   </edgesGeometry>
   <lineBasicMaterial>
</lineSegments>

But the edgesGeometry merely takes a geometry prop and so. Not quite sure how to use these descriptors 😒

[johnrees]

Ahhh that makes a lot more sense! Didn't check which repo I was in, need my morning coffee haha...

[denizs]

Haha - I know that feeling. If you're finished I'd be so damn thankful I you could give me helping hand here :D

[johnrees]

Well as you asked so nicely I had a quick attempt, and now I see what you mean! I haven't worked on this project in months so I'm really rusty with it.

My workaround was

const geometry = new THREE.BoxBufferGeometry( 1,1,1 );
...
<edgesGeometry geometry={geometry} />

but clearly that's not an ideal solution.

I'll mess around with it a bit more and will try to post something here if I get anywhere with it/you don't get any better answers in the meantime.

Good luck!

[denizs]

Thanks @johnrees!
I came up with the same solution, but discarded it earlier as I though it to be a mere workaround. Not sure, whether this implementation style was chosen for a good reason but wouldn't the approach described above be slightly more intuitive? That is, nesting components like you'd compose the function? Maybe something along the lines of the following pseudocode:

if (!props.geometry && props.children && props.children.length === 1) {
   return new THREE.bufferGeometry(props.children[0]())
}

P.S. Lemme know if I should drop a PR on that matter :)

[toxicFork]

Apologies for responding late, PRs are always welcome! For now the workaround is necessary until we can merge a proper fix in (or the next version is out and "magically takes care of it" :P)

[jrehwaldt]

It would be good if a PR also supports <geometryResource...> as child. This way the geometry wouldn't need to be duplicated if it is rendered as edges and as box.