[SOLVED] HTML Drag and Drop

reneeee · May 22, 2018, 12:19pm

Hello !

I’m trying to follow an example about drag and drop in html but i get errors.
The example is here:

https://playcanvas.com/editor/scene/610856

If somebody could tell me what is wrong, will help wery much.

Diego_Locatelli_Tade · June 16, 2019, 7:59pm

Hi @reneeee, did u make some progress with that issue?

will · June 16, 2019, 9:04pm

The PlayCanvas glTF viewer supports drag and drop:

github.com

playcanvas/playcanvas-gltf/blob/master/viewer/src/viewer.js#L402




var cameraPosition = getParameterByName('cameraPosition');
if (cameraPosition) {
    var pos = cameraPosition.split(',').map(Number);
    if (pos.length === 3) {
        viewer.cameraPosition = new pc.Vec3(pos);
    }
}


// Handle dropped GLB/GLTF files
document.addEventListener('dragover', function (event) {
    event.preventDefault();
}, false);


document.addEventListener('drop', function (event) {
    event.preventDefault();


    var dropzone = document.getElementById('dropzone');
    dropzone.style.display = 'none';


    viewer.onlyLoadAnimations = event.ctrlKey;

Works great. Try it here:

https://playcanvas.github.io/playcanvas-gltf/viewer/

Just drag on a .GLB file.