How to load meshes with a drag and drop

Questions
1

Is there any sample code that demonstrates how to load the meshes by dragging and dropping a file in the canvas? The sandbox uses this functionality

2

The sandbox is opensource, so you can see exactly how to do that - Babylon.js/packages/tools/sandbox/src at master · BabylonJS/Babylon.js (github.com)

We also have a drag-and-drop support in the core library as well - FilesInput | Babylon.js Documentation . this will require you to define all of the callbacks correctly and deal with dropping files as you see fit

3

I saw 2 different playgrounds using this Filesinput.

I guess it would be better to use just a input button like in the second playground, but it seems it’s not working. Could you help me to get it working?

4

@mathus1 , I’ve updated your playground examples.

For the first one the BABYLON.FilesInput class does not actually load the model into the scene, it creates a blob file that you must add the logic to load into the scene in the onProcessFileCallback. The file parameter can be directly forward into BABYLON.SceneLoader.AppendAsync, see example bellow:

file input test | Babylon.js Playground (babylonjs.com)

The same thing is true for the callback fileInput.onchange, the file object can be directly handled to BABYLON.SceneLoader.AppendAsync.

Babylon.js Playground (babylonjs.com)

6 Likes