Drawing a Selection Box

[NickAkhmetov]

Hello,

I'm having some trouble drawing a selection box over my canvas as demonstrated here in this three demo, the source code for which is here.

I have been able to hook into the SelectionBox example in the Three codebase (I am able to console log the selected objects). However, attempting to overlay a div and style it as in the example is failing; nesting the Div inside the console throws an error as divs aren't part of the Three.js namespace, and it's not showing up when I render the canvas and div inside the same fragment, despite matching the selection styling in the linked example.

What is the conventional way to mimic this behavior in fiber?

[NickAkhmetov]

I think I solved this myself. I placed the div outside the fragment as previously said, but had been passing it improper coordinates to create the selection box.

[ghost]

Hey, can you share the code in codesandbox or something? I am stucked on this.

[NickAkhmetov]

I threw the code for that into a gist for you/anyone else who ends up needing it - https://gist.github.com/NickAkhmetov/816c345fc9eaebac1e5dc7d076fda56b

The setSelecting, setStart, setEnd, and setSelection arguments are functions which set the various states for selection elsewhere in the application. In this case, selecting is whether or not selection is ongoing, start is the starting coordinate of the selection, end is the ending coordinate of the selection, and selection is the pointer for where to store the selected items. However, since I'm still a beginner with Three, probably don't get caught up in the conventions/specifics of my implementation.

You should be able to add this to a Three canvas as you would any other component.

[ghost]

Thank You