I’m trying to create a radial system like in this image where the user will click on the proper distance away from an object with static circles in the photo:
The radial that they click on will need to expand like this, originally I was thinking of using vector images, but the tool that I’m using would make it very difficult to generate, anyone have any suggestions on how to achieve this?
Hi again, my old friend. 
Wingnut goofin’ around with GUI 2d ellipses… https://www.babylonjs-playground.com/#NXQKQF#1
(just getting started)
I turned-on the hit-test… but… just like a previously-worked drag-the-gui-control playground, this one has some early problems.
Problem #1: Watch console. Click on/in ellipse. PointerDown observer triggers, looks good (In Firefox esr). Try it again. For me… futher clicking fails… UNTIL… I move my pointer off-of the canvas, and back onto it, again. THEN… click works again… once.
Problem #2: Ellipse’s onPointerClickObservable (line 40) seems to completely fail.
I73/others… can you guys verify these same symptoms/issues, and does anyone have info?
I73… stacking multiple ellipses atop each other (my goofy idea that I was about to test)… is probably NOT a solution for you… because… GUI 2d ellipses are actually painted-onto SQUARE pieces of canvas. SO… when you overlay small ellipse atop medium ellipse atop large ellipse, the corners of their square canvases… “intrude” into other ring-zones. When that happens… user could click within a ring-zone at some 45 degree angle, and unknowingly click the wrong zone. (Their pointer-click hit an invisible canvas corner of the wrong ring).
Briefly, and restated, ellipses stacked atop each other… are actually square containers stacked atop each other… and this can cause problems. IS THERE ANY CHANCE, that your project could use SQUARE zones… instead of circular? If so, there’s hope for the “stacked controls” idea.
But we gotta find that darned mouse-off-the-canvas-before-re-click issue… soon. That’s a world-wide sized scene-breaker bug, I would say. (If it IS a bug). More likely, Firefox screwing up. Even MORE likely, Wingnut screwing up.
Yeah I’m having the exact same issue, since the UI is rendered to a quad the click would register the first ordered ‘sprite’ I think I’m going to redesign this somehow. Thanks so much Wing!
My pleasure. As before, I think you are too quick to mark as solved. You should keep it un-solved for a while… see if others have ideas. Just my opinion… not worth much. There’s lots of “idea people” hanging around. It’s quite likely that they have (better) ideas.
Could a flat-stack (ring within ring within ring) of real mesh toruses (tori?) work? Thin hi-diam torus, then fat invisible torus inside it, then another thin visible, then another fat invisible, etc? Put an actionManager on each… for click-listening? shrug. You could down-scale them on the y-axis… to make them quite “flat”, height-wise.
Sort of like this: https://www.babylonjs-playground.com/#DJF437#29 There’s invisible ‘tori’ in the gaps between the red rings… which could have actionManagers on them… and become click-zones. Nice and flat. Could parent them all to disc. Good times. Version #30 has the invisible gap-tori… set semi-visible.
Wing, that’s exactly what I needed, now I can click on the mesh, thank you so much, I didn’t even know about these classes.
Edit, this is perfect! https://www.babylonjs-playground.com/#DJF437#35
Thanks so much
