Hi everyone,
What would be a good approach to set controls to move, resize and rotate directly on 3d scene?
In this playground, everything is controlled via the controls on the left.
How to put these controls around decals directly on 3d scene so they can be manipulated more intuitively?
For example put rectangle around decal which will have on corners small icons for streching, rotating, deleting.
Iām not sure to fully understand your question. There are many ways of building a UI and they all have their pros and cons. Typically, the user (advanced user - or gamer) is used to a number of approaches towards GUI. Typically, I have my favorite ones but can still cope with the others providingā¦ : thereās āconsistencyā. Itās about āwhat do you expect?ā as a user. Whenever I face a UI that seems to not deliver āconsistencyā in the chosen approach/method, I get frustrated.
What we have here, in this PG, is what I would call a ātraditionalā UI, using a menu/panel fixed on top of the scene (in this case to the left). All interactions are made through this āstaticā menu panel.
As opposed to this (donāt know if thatās what you call āmore intuitiveā), thereās the āin-scene contextual menu/interactionā (so I would call itā¦ with my bad english 
). Typically, the most basic interaction for this would be to pick an item/object (left or right click on it) to open a contextual menu. Select from there. Is that what you are asking for? Easiest would be if you had an example, just to make sureā¦
EDIT: May be want to have a look at use gizmo to position, rotate and rescale?
https://doc.babylonjs.com/features/featuresDeepDive/mesh/gizmo
Thanx for your reply. Yes something like gizmo (but in 2d on 3d :)) is the closest.
For example in playground with skateboard, put decal on it and when clicked get something like on the picture:
Yes, totally can do and absolutely exist. May be you should make a quick search in the forum using some keywords. I do recall examples of thisā¦ would just need to find themā¦ Right now, I donāt have time, but if I manage to find it later today, Iāll post the link(s) here for you.
I searched but canāt find something similar, probably using wrong keywords 
If some keyword come to your mind or if you find it when you get more time please post it here.
Thank you very much
can you wait a few hours? Eventually somebody else will kick-in before that. Or meanwhile, you can work on other parts of the project? One thingās for sure, you will find your way around this. guaranteed
I can absolutely wait, Iām happy this is already done as it appears as an important feature in my project. 
Unfortunately, I also canāt find it just nowā¦ and I said, will not have the time before later today. Or even tomorrow. Eventually, I could create a PG but Iām about 90% sure thereās already a base somewhere. Let me try ask some people. Do you Guys recall a PG thatās roughly doing this ?@gabrieljbaker @labris
Hi, hope you are well?
I just re-opened this topic and it looks like nobody kicked-in in the mean time. And I also couldnāt find this related PG so far May be it was just me dreaming of it 
Or I didnāt call-in the right people 
On the other hand, itās the weekend so this might require a bit of patience 
May be a few more explanations would also helpā¦ Like, it would help me - if I decided to actually create this PG. May be you could further explain what these icons are doing? I mean, clearly some of them are buttons (like the ābinā) which will likely dispose of the mesh or disable it. Thatās explicit enough. But what about the rotate and scaling? Are these buttons or just labels? In case, itās a button, how would it work? You would click an hold on the button and move the mouse to rescale or rotate (from the object center), and on release (pointerUp) stop the interaction? Whatās the top-left button/label for? Is it to copy/make clone? You are speaking of 2D? Do you mean you are in a 2D environment only? Or is it just the icons that are 2D (better said, facing camera or using billboard mode from the 2D GUI or such?)ā¦
Hi mawa,
Thank you for your effort.
Rotate button should rotate when you click and drag, around center. Similar for resize button.
When you click in dotted rectangle and drag it should move entire sticker/decal. Copy button - duplicate it.
Lock button - locks decal preventing unintended changes.
PG would be great.
sub, 7. ruj 2024. 12:01 mawa via Babylon.js <notifications@babylonjs.discoursemail.com> je napisao:
So rotate and resize button are: pointerDown and hold to rotate/resize. Mouse move while holding (left?) mouse pointerDown to resize or rotate. Release (pointerUp) to stop interaction. Correct? Do you still want to show the boundingBox or no?
Edit: Ok, I think Iāll start drafting a PG for this sometime between today and tomorrow. Sorry cannot commit for more urgent/precise timing 
But you have my word Iāll follow up on this and weāll get you there (somehow 
). Meanwhile, have a great day 
Canāt say enough thnx. 
Bounding box should resize with mesh, that would be intuitivne enough.
Looking forward for PG, no hurry, thnx.
sub, 7. ruj 2024. 12:39 mawa via Babylon.js <notifications@babylonjs.discoursemail.com> je napisao:
Hi, Hope you are well?
This morning, Iāve been looking around the different approaches that could eventually work for this. It seems a bit more complex than I first thought butā¦ donāt worryā¦as I said, weāll get you there
I identified 3 ways to approach this; One of which I explored a bit further.
Approach 1
Use the gizmo manager with custom mesh:
https://doc.babylonjs.com/features/featuresDeepDive/mesh/gizmo#gizmo-customization
Approach 2
Use the gizmo manager with app bar:
Approach 3 (The one I pushed further):
Based on the GPU picking PG.
The idea is to not use gizmo at all. Instead, normalize all to unit cube and use bounding box to create meshes (as markers) to link with 2D GUI.
I would like to require the insight of some more knowledge people than me before moving further.
@roland May be you would kindly have a look at this and give me your feedback?
May be particularly focusing on the last one which could be the most promising. Unless Iām overlooking something.
Approach 3 PG
base version
hiding gizmo through layer mask (click on button with label ā1ā to test view rescale and check that the buttons remain attached to the edges of the bounding box)
alt version (same PG butā¦
showing gizmo (problem with layer mask - however, here you can use the gizmo to rotate, rescale,etcā¦ and check that the buttons always face camera and remain attached to the boundingbox)
Let me explain this PG.
Itās actually largely inspired from the GPU picking PG. Reason why I ask you;)
The thinking and requirement is the following:
1) Requirement
2) Building
The advantages I find with this solution is that
buttons always keep facing camera, keep with their size and keep attached to the bounding box edges WITHOUT any further need to add code to rescale, position, rotate. Itās seamless and straight forward (so I think)
while being attached to this transformNode (or anchor), it can be re-parented to any other mesh (providing as per requirement, that all these meshes are first ānormalizedā)
From there - and as opposed to what is currently in the PG - I would not be using the gizmo manager. Read there would be no gizmo. Actions would be done through the buttons only using mesh/drag/pointer behavior(s). We could show just the bounding box or create a custom visualization of the bounding box (if you want to keep with your dotted lines).
Any thoughts around this (and eventually a hand or an alternate version/thinking) would be (as always) highly appreciated.
Meanwhile, Both (and All), have a great sunday ā¦ And Iāll be back on this by tomorrow morning 
OMG! Seriously? I got it all wrong. I should learn to read a post correctly 
. Because the title says āMoving and resizing objectsā. So, you want this for decals, applied on a texture? Thatās something completely different Iām not even sure how you can do that. Itās may be not completely different but it still is different. I think you need to draw the decal on something like a plane and then transpose it to the mesh. Is it really for decals? I will have to call for some more help here if thatās what it is
Can this be another type od gizmo which can be attached to mesh or decal and just output rotation, resizing and moving data so that data can be used as you want. For example in skateboard PG this functionality works through controls on left, just need same data output but from diferent gui controls.
Hope I was articulate enough. 
ned, 8. ruj 2024. 14:13 mawa via Babylon.js <notifications@babylonjs.discoursemail.com> je napisao:
Hum? We are talking of two very different things here. An object (mesh) has nothing to do with a decal, texture or dynamicTexture. Already all of the properties are different and then, the entire logic of how you scale or resize or position a mesh VS a texture is completely different.
For a start, obviously thereās no boundingBox around a texture (or a decal). Speaking of decals or any kind of dynamicTexture, thereās also no āpreviewā. A preview would mean a āprototypeā of some sort because it needs to be projected along the mesh normals and the overall wrapping and projection mode of the texture. And then, you still wouldnāt be able to select it as such, not to speak about ācloning itā. Honestly, I have to say, Iām no specialist of ādecalsā or for the complex handling of dynamicTexture. I have no faen clue how this could be achieved. Is this really something you need? Do you have any example from another app that actually has this feature?
Example of wanted behavior is 3d configurator
PG with skateboard would be good start.
uto, 10. ruj 2024. 09:36 mawa via Babylon.js <notifications@babylonjs.discoursemail.com> je napisao:
Nice site. 
Really cool. However, I noticed that you first need to choose a t-shirt design. Which makes me think that these meshes are probably designed to receive the texture as an overlay (not a decal). But then, yes, they do have all the controls and everything. Very nicely done I would say.
However, honestly, I have to admit Iāve no faen clue how to achieve this. Youāre gonna need some true expert advise here. Let me ping @PatrickRyan. FYI: Heās the creator of the skateboard PG. This sort of challenge should probably catch his attention . You might need a bit of patience though. But from all input you can get, I donāt see any that would be more valuable than his
Edit: Looks like itās actually using css. Really donāt know if you can achieve this only within BJS.
Thanks for your effort @mawa
I am thinking of using Fabric.js library as I am drawing to Canvas via DynamicTexture. Fabric.js have object manipulating āgizmoā out of the box.
What do you think of that approach?
You might be able to use the GUI library to do this. Iām not sure if itās supported out of the box, but you could have the gui texture in a second channel on the material and overlay one on top of the other using a custom shader.
That way you get the button interaction and āprojectingā out of the box. Only thing you need to do manually is manipulate the gui images based of off the user interaction.
https://doc.babylonjs.com/features/featuresDeepDive/gui/gui#texture-mode
