Hi is there any Playcanvas project example where I just drag and drop the model in the Playcanvas screen and the model will be loaded?Thanks
1 Like
Are you talking about in a lunch or editor? If you mean the editor the models that you upload can do this, you have to click and hold the diamond that generates when the model is uploaded in that models asset folder, then drag it into your scene in the editor. Hope this helps.
No, Iām talking about the model to be placed like the gltf viewer, is there any functionality that I could add in my script?
Probably not as easy to use as just a script, but the model-viewer source code is here: GitHub - playcanvas/model-viewer: 3D model viewer supporting glTF 2.0 and PLY (3d Gaussian Splats)
1 Like
var LoadManager = pc.createScript('loadManager');
LoadManager.attributes.add('loadImagePlane', { type: 'entity' });
var self;
var gltfRoot = new pc.Entity('gltf');
pc.app.root.addChild(gltfRoot);
// initialize code called once per entity
LoadManager.prototype.initialize = function() {
LoadManager.Instance=this;
// handle dropped GLB/GLTF files
document.addEventListener('dragover', function (event) {
event.preventDefault();
}, false);
document.addEventListener('drop', function (event) {
event.preventDefault();
var initScene = function (roots) {
// add the loaded scene to the hierarchy
roots.forEach(function (root) {
gltfRoot.addChild(root);
});
// focus the camera on the newly loaded scene
//camera.script.orbitCamera.focusEntity = gltfRoot;
};
var loadFile = function (file, availableFiles) {
var processUri = function (uri, success) {
for (filename in availableFiles) {
if (filename.endsWith(uri)) {
var fr = new FileReader();
fr.onload = function() {
success(fr.result);
};
if (uri.endsWith('.bin')) {
fr.readAsArrayBuffer(availableFiles[filename]);
} else { // ...it's an image
fr.readAsDataURL(availableFiles[filename]);
}
}
}
};
var fr = new FileReader();
fr.onload = function() {
var arrayBuffer = fr.result;
var extension = file.name.split('.').pop();
// empty the current scene
while (gltfRoot.children.length > 0) {
var child = gltfRoot.children[0];
gltfRoot.removeChild(child);
child.destroy();
}
if (extension === 'glb') {
loadGlb(arrayBuffer, pc.app.graphicsDevice, function (roots) {
initScene(roots);
});
} else if (extension === 'gltf') {
var decoder = new TextDecoder('utf-8');
var json = decoder.decode(arrayBuffer);
var gltf = JSON.parse(json);
loadGltf(gltf, app.graphicsDevice, function (roots) {
initScene(roots);
}, {
processUri: processUri
});
}
};
fr.readAsArrayBuffer(file);
};
var getFiles = function (success) {
var foldersRequested = 0;
var foldersCompleted = 0;
var filesRequested = 0;
var filesCompleted = 0;
var files = {};
var loadEntries = function (entries) {
var entry = entries.pop();
if (entry.isFile) {
filesRequested++;
entry.file(function (file) {
files[entry.fullPath] = file;
filesCompleted++;
if ((foldersRequested === foldersCompleted) && (filesRequested === filesCompleted)) {
success(files);
}
});
if (entries.length > 0) {
loadEntries(entries);
}
} else if (entry.isDirectory) {
foldersRequested++;
var reader = entry.createReader();
reader.readEntries(function (entries) {
loadEntries(entries);
foldersCompleted++;
if ((foldersRequested === foldersCompleted) && (filesRequested === filesCompleted)) {
success(files);
}
});
}
};
var i;
var items = event.dataTransfer.items;
if (items) {
var entries = [];
for (i = 0; i < items.length; i++) {
entries[i] = items[i].webkitGetAsEntry();
}
loadEntries(entries);
}
};
getFiles(function (files) {
for (var filename in files) {
if (filename.endsWith('.gltf') || filename.endsWith('.glb')) {
loadFile(files[filename], files);
}
};
});
}, false);
};
i run this code and it works but the thing is that its not loading the model properly even i add the library as well
Error:
After load the other model then i got the error like this:
I agree. Things like this are more complex and also require more recourses to load/function.