How to select objects with a selection rectangle?

Questions
1

I would like to know if it is possible to render some triangles (or other shapes) and then use the mouse to draw a rectangle and obtain information about the shapes in the rectangular region?
If you know of some example that does this, please let me know. Or if you could provide some direction on how to do this, I would appreciate it.

2

Hi!
Are you looking for something like that?

3

Since R98 there is a new example that demonstrates a box selection feature:

https://threejs.org/examples/misc_boxselection.html

4 Likes
4

@Mugen87
Maybe I’m so lucky, but I have that error message in the browser console, using this example:
ReferenceError: event is not defined

All of the event listeners get e as a parameter, but inside their functions they have event instead of e

5

Looks like a bug in the example. What browser are you using? I’m not getting this error with Chrome…

6

Firefox
Let me check it with Chrome.
Yeah, using Chrome, there are no errors.

7

Indeed, FF does not work. Would you like to do a PR with the fix? :innocent:

8

so you guys are saying that a simple variable name substitution is needed to fix this code? This code looks very promising.

9

I appreciate the help from you and @Mugen87. Both approaches are very promising.

10

Related PR:

11

I’ve been reviewing the code in box selection and I have a question. Why is the backplane using normalized coordinates and the other planes using un-normalized coordinates? The code I am referring to is provided below.

image

12

In reference to the code posted above, when I run the logic and look at the points passed to the plane objects; I expected to see planes taking the shape of a box but instead I see:box

The plot shows all of the planes except the back plane. I’m not sure if this is a bug or misunderstanding on my part. Any help is appreciated.

13

The graph below shows the desired effect. One of the problems that I see is that 4 of the 6 planes are being created using the camera position. The other issue that I encounter is that after the unproject the coordinates are nowhere near the selected region. Can someone explain to me what might be the causes for this?

bounded

14

This is awesome, is there any way to get the instanceId for InstanceMesh so the entire mesh isn’t selected?

15

I made a change to SelectionBox.js so it has this.instanceDetection = {}. This gets updated to include information like this:

{
    "460A8174-2AD7-4F0B-96B1-3DD4CA57AE3A": [12]
}

The InstanceMesh id and which instance ids are currently in the frustum.

@Mugen87 , @prisoner849 , I was thinking of making a PR for it, what do you think? If so, do you think that is a suitable name for the property?

Update
Did it: Instance mesh support for selection box by Steviebaa · Pull Request #22399 · mrdoob/three.js · GitHub

1 Like
16

:slight_smile: his is nice , but where is the code ?:slight_smile: