Greetings.
I want to drag and drop my model from my panel to the scene.
Is it possible?
If it is possible, how can I do it?
Thank you for considering my question.
Hi,
I would say āNOā and āYESā, ā¦ āMAY BEā 
Letās put things in order:
YOU CANāT insert a 3D model in a GUI element (control or container). It only accepts images. 2D format images, such as JPG, PNG, SVG.
YOU CAN however display a gui and have models on top of it. This will require a multicam approach with a few more tips and tricks.
YOU CAN create a 2D image/representation of your model and when dragging it into the scene have it replaced by the model, howeverā¦ unless the model is already loaded there will be a delay while the model is loading.
And then comes the problem that with your model being dragged from a 2D view (the gui) to a 3D view (the scene), how will the user control how to place it in the depth of the scene? What will happen if you just release it mid-air in the scene? Will it drop to the floor? Many, many questions and yet, we (I) know nothing about your scene. May be itās a top-down 2D view, like a floorplan?
In any case, honestly, I found users have their habits and mostly, they want to stick to it. Making a revolution in the UX/UI is not something that happens easily, successfully and every day.
We are used to drag-n-drop elements in the GUI (like i.e. an inventory) and we are used to pick and move elements in a scene. But having automagically elements that are from the 2D layer transform to 3Dā¦ hmm, Iām not sure. I would ask for a challenge.
Of course, as always, my opinion only.
And meanwhile, have a great day 
If the panel is a 2D flat image like mawa mentioned, it is problematic due to problems of depth perception and such. Also, the Babylon GUI doesnāt have drag and drop events. You could have something like a main viewport and a secondary one (like videogames inventory or minimaps), and perform a sequence of actions to detect a pick on the object on one viewport and the movement to the other viewport.
But this is going to require some calculations and Iām not sure this is what you want.
1 Like
Thank you for reply @carolhmj and @mawa .
Actually I want to add model or img of model to my pannel(for model list) and I want to insert model to the scene when I click the image.
Okay, How can we get image from the model when import the model to the scene?
You can take screenshots of them: Render Scenes To .png Files | Babylon.js Documentation (babylonjs.com)
And use the images on GUI.
1 Like
Hi @hatoyama,
Yes, indeed, clicking on a thumbnail to load the model is the common and simple/safe way.
Iāll gladly try help you with that.
In fact, I was blocked this morning working on my own scene while waiting for a debug.
So, I took a bit of time to better illustrate the answer from your other post (about loading and normalizing models) and I coupled it with a rough GUI to show how it might all work together. I hope this helps.
Note that, of course, there are many different ways to do it. I also made a very simple and explicit GUI.
You can make GUI from code, from the Editor or from the Figma to BJS plugin.
Lotās of ways to create an awesome GUI and the code I used here is also the very simple/explicit version. You can make it much slicker if you have multiple of a same type of control and observables.
But I thought this form might give you some clues. You may come back later to ask (or challenge us ) on how to optimize it all.
As I said, I hope this helps and meanwhile, have a great day
1 Like
Thank you for reply everyone.
Actually I made the Canvas UI. I have made the function of inserting of mesh.
Case of @mawa , it uses the images from source for button.
But is there any way use image which taken from imported model?
No. In any case, you would first need to load the model, make a screenshot of just this portion, save it and use it as image. So thereās no chance and no meaning for that. As per @carolhmj, all you have to do is create your thumbnails/images for your GUI. Load the model, set your camera to make your shot, grab it and make it an image to use in your button.
EDIT: To do so,
- Load your model
- Set your camera to appropriate view
- Open the āInspectorā - you can enable with : scene.debugLayer.show();
- Click on fourth Icon, and āmake screenshotā to export as png
- Eventually edit this png in appropriate app
- Use this as background image in control
Just for my understanding, how many of these do you have? Are you looking to automate the process?
In any case, even so, it would need to occur outside of the scene. Like you could load the image thumbnail linked to a model but this still means the thumbnail image needs to be generated BEFORE the scene displays. There are ways to do that but it only make sense if you have a large number of these (like a catalogue or something that can be constantly enhanced and so you would need to generate all from the model, thumbnail and description when the model is added to the product). Is that what it is?
Yes, I want to make automate the process.
I canāt imagin that the amount of device.
So I want to get the image from each device automatically.
OMG. Wrong pick 
. You should have stated this before 
So, we are definitely not in the correct use case, are we? We are talking hundreds or may be thousands of models, added by? At this stage, could you provide some details about the project scope?
Knowing that, Iām no backend dev (in fact not even a dev, Iām a simple PM, AD and designer). I know shit about backend processes (I know they exist 
)
This would indeed require a completely different approach. All I can say is that it would be done outside (or aside) the scene. Eventually, as a prior processing before being committed to prod. Or on the fly, using I suppose webworkers. As I said, not my cup of tea (but others can surely help).