Jump to content

I do something wrong with mesh.intersectsPoint(otherMesh.position)...


Recommended Posts

Hi guys,


I'm creating a simple selection-mechanism with a 'rubberband' which selects all the meshes within that rubberband.

What I have now is this:




For selection, I check the intersection of the generated rubberband mesh (line 122) with the existing box positions and if they intersect, the selected boxes get a green color. Like this:


        function getMeshesSelectedByRubberBand() {             var meshes = [];             for (var index in boxes) {                 var box = boxes[index];                 if (game.rubberBand.intersectsPoint(box.position)) {                     meshes.push(box);                 }             }             return meshes;         }
but as you can see the wrong boxes are selected, and I don't understand why... Do anybody see anything wrong?
Link to comment
Share on other sites

Hi willen,


I played around with it for quite a while now and didn't get it to work with the intersect methods, no clue why... maybe there is a bug or we both were doing something wrong here ;) maybe somebody else can enlighten us.


Anyways, I tried a different approach and it seems like I succeeded: http://www.babylonjs-playground.com/#PSKRF#0


The idea is to do the intersection check manually by calculating the distance between the center of the bounding box and the boxes and then just check if there are closer than half the size of the rubber band box.


Here is another (fancy) version where the box updates while you drag: http://www.babylonjs-playground.com/#PSKRF#1


Hope that helps! Let us know about how it goes and if you need anything else! :)

Link to comment
Share on other sites

Hi iiceman, 


Thanks so much!


Your method works perfectly, so I'll be using that, but in the meantime I'm really interested if somebody else can figure out why the normal intersect methods in the demo don't work as expected...


A small follow-up question would be how to make a simple 'flat selection ring / circle' around the selected objects instead of changing their color... (also posted here, no answers http://www.html5gamedevs.com/topic/19636-how-to-create-a-selection-ring-like-in-starcraft-2/). Do you have any pointer that I could look at?

Link to comment
Share on other sites

Hi Willem...  good to have you on the forum with us.




I made some minor changes.


Oddly enough, the whole problem SEEMED to be fixed by adding line 128...  a scene.render().  You made the selection box fine... (fun/useful code, by the way)... and everything seemed right, but it needed to be kicked (with scene.render) to get it started.  :D


I dunno.  I just went feeling around in the dark until something worked.  heh


I will leave it to you... to figure out how to make the selection area be see-thru... when drag goes from upper-right to lower-left.  Cool demo!  Fun collaborating.


By the way, decals make their own mesh when they are created, so you can plaster one onto the ground without worrying about making a mesh for the decal texture.


Also, there is mesh.showBoundingBox = true/false... for indicating "mesh is selected".  Also, we have an "edges renderer" that can be used.  And, you can make a CLONE of the object and set its material to wireframe, and place the cloned wireframe mesh...  atop the selected mesh (you might need to set selectedmesh.visibility = 0.5).  And, speaking of visibility... you could sweep that value in the renderLoop (maybe with a sine wave)... between 0.5 and 1.0.  In other words, the mesh cycles half-visible-full-visible... when it is selected.  Fancy!  :)


http://www.babylonjs-playground.com/#TYAHX#21 - a demo where I was testing the logic of the edges renderer... to see how well it "found" edges... even when there was very little angular change between faces of the sphere.


All in all, showBoundingBox, decals, edgesRenderer, visibility pulsing, or overlaying a wireframe... these are all ways of showing something being selected... WITHOUT using a material color change.  There's many more, like scaling pulsing, spinning, vibrating the mesh randomly, swimming a sine wave thru its vertex positions, lots of goofy toys to play-with.  Ok, party on!

Link to comment
Share on other sites

Nice fix Wingy! I took a look at the bounding boxes when I played around with it. I was hoping I could use them to calculate the size of the rubber band but it didn't work out somehow. Maybe it's the same problem with the intersect method and the scene.render() somehow forces a bounding box update? Somehow I remember having ready something similar...I think :D


I refactored a bit and made the rubber band rescale instead of recreating it all the time: http://www.babylonjs-playground.com/#PSKRF#2


I took a shot at the selection circle, too: http://www.babylonjs-playground.com/#PSKRF#3

Using dynamic texture to draw a circle on a disc mesh that is then placed under the mesh. I think it looks pretty neat, but that's for you to decide, willem. :D


Edit: since I had a good run I kept going and added a cool dashed line + spinning effect. You can have a lot of fun with dynamic textures: http://www.babylonjs-playground.com/#PSKRF#4 Fancy, eh? ;)

Link to comment
Share on other sites

Guys you are so awesome!  :D


It's so great to come to this forum as a newbie, start trying something out, and get this incredible help, pointers, enthousiasm, examples :)  This feels like collaboration how it is meant and I will surely try to give back once I know my way around  :)


Thanks Wingnut, I'll surely go with the scene.render() fix so that I can use as much standard code as possible. The edges renderer is nice too, I'll probably use it later for some other uses.


iiceman, re-using that rubber band is a great idea, thanks for sharing the demo.

And the circle is even more awesome, I didn't know I could use 2D canvas as a texture: excellent! And yes, it certainly looks great  ;) 



This playground is really one of the most useful things of the framework; it makes iterating, showing, helping so much easier!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...