Area picking

[Julz666]

Hi, firstly I'm really sorry if this isn't where I'm meant to ask general questions?

Is there an example of "area picking" multiple 3D objects? That is dragging a frame with the mouse and selecting all objects within it?

I've been playing around with the THREE.Ray object and it's intersect(s) methods but short of looping through and tracing every X Y coord to find all intersects I'm a bit lost.

I've looked all around the web and through github and stack overflow but no help did I find.
Any help greatly appreciated.

Thanks in advance
Julz

[aslushnikov]

It would be better for you to trace through your objects on scene then looping through every X Y coordinates. In this case you won't be able to use THREE.Ray and will have to implement custom logic to figure out if an object is inside the frame. I believe this approach will drastically speed up your code.

[alteredq]

Hmmm, this is interesting problem.

I think rectangle on the screen should correspond to some subfrustum of the camera. If you could construct matrix for this frustum then you could try to do the same check like we do for frustum culling.

[Julz666]

Yes, that makes sense.
I'm not much for 3D coordinates or complex matrices tho,
If I define a THREE.Matrix4 by passing in rectangle vertices (mouse drag) and near far points to the Matrix4.makeFrustum method.
Could I then create a THREE.Frustum by passing the Matrix4 into the Frustum.setFromMatrix method?
Then use the Frustum.contains method to detect if an object is within it?

Does that sound like it's got a hope in hell of working?

Do the mouse coordinates relate to any 3D world coords? as in is the mouse position relative to the cameras near plane or anything like that?

Sorry if I'm just being a n00b I just really need an answer to this.

[mrdoob]

You need to project the mouse coordinates to the 3D world. Take a look at this example:
http://mrdoob.github.com/three.js/examples/webgl_interactive_cubes.html

[emnh]

I adapted the three.js picking example to area selection using a subfrustum constructed based on a rectangle of the screen. Click and drag to select. It doesn't feel as accurate as projecting all the 3D objects onto 2D screen space and then intersecting with screen rectangle, but it works decently and I think it's faster.

Relevant questions at stack overflow:
THREE.js How to detect the intersection of a 2d square and 3d obj
THREE.js How to pick all objects in an area