I am new to PlayCanvas, although I have a great deal of experience with other 3D engines and libraries (Unity, OSG, …).
I would like to know what I should do to load a 3D model AT RUNTIME (this is the key of the question) from an application developed over PlayCanvas.
In Unity it can be done with OBJ files. In OSG, it can be done with several 3D file types.
I have read somewhere that PlayCanvas can load models at runtime using a JSON format (specific for PlayCanvas), but I have been unable to make it in a few sample projects that I have tested.
Is it true that models can be loaded at runtime within a PlayCanvas application?
If so, how?
It is possible to load at runtime an FBX model, for instance?
Not directly possible. You will need to convert to the JSON format that PlayCanvas expects which can be done at runtime (despite being a bit slow) but you will either have to write the converter yourself or port one of the existing ones (there’s some on the forums) to JS.
It be far easier to convert them offline (either by downloading the JSON from the editor or using one of tools) and load the JSON at runtime as shown here: https://playcanvas.com/editor/scene/547080
What can also be done is to have the model (JSON) in your PlayCanvas project not preload until you need it. This can be done by unticking the preload settings in the related assets.
Thanks.
That was my understanding (could load JSON but not FBX) but I have never made it work.
It may be OK for my project to convert them offline and load them from JSON at runtime.
I’ll try the link you sent when I have time (now I should go).
I hope it works.
I am trying to create an authoring tool that allows creating a customized virtual scene. So I need the user be able to load his/her own models at runtime.
Now I have one question.
The URL of example is a dropbox URL with HTTPS.
Is it possible to load models from my own hard disk??
If models are loaded from an URL, what kind of restrictions do they have?
Is it necessary to create an HTTPS URL?
I have setup a webserver and PlayCanvas does not read the model from the URL of my webserver. Maybe because it was not an HTTPS URL??
Yes if the hosted PlayCanvas application is on https. No if it is on http. Just be wary of CORS.
Not 100% sure. I would have thought ‘yes’ as you could store/copy the JSON on local application data. Otherwise your other option is to allow the user to upload to online storage on their account.
The error I get is that the file is not served as an HTTPS:
“Mixed Content: The page at ‘https://launch.playcanvas.com/548502?debug=true’ was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint ‘http:/*********/file.json’.
This request has been blocked; the content must be served over HTTPS”
The output clearly suggests that you are totally right…
Regarding the load of models from your local hard drive, what would be the URL I should provide in the script so that PlayCanvas finds the model?
I want to make a solution where the modelling Blender artist can upload to a playcanvas driven website as easy as possible - with no conversion steps. My first hunch circulated around JSON, but since my last post I did look into gITF as well. Some issues around the blender versions in relation to installing the gITF exporter … the 2.78 blender can add it but not 2.79 or later (as far as see)
Converting between various polygonal formats has historically been complicated and messy. Keeping the materials looking right is very problematic. That said, you may want to refer potential users to a site like this to convert their models to JSON first? Just a thought. I haven’t tried it.
I’d go with glTF if you can. PlayCanvas will continue to integrate glTF more deeply as time passes, and gradually move away from the current JSON format. glTF is generally a more efficient serialization format for models.
var LoadMon = pc.createScript('loadMon');
// initialize code called once per entity
LoadMon.prototype.initialize = function() {
var app = this.app;
app.assets.loadFromUrl('assets/monkey/monkey.gltf', 'json', function (err, asset) {
var json = asset.resource;
var gltf = JSON.parse(json);
loadGltf(gltf, app.graphicsDevice, function (err, res) {
// Wrap the model as an asset and add to the asset registry
var asset = new pc.Asset('gltf', 'model', {
url: ''
});
asset.resource = res.model;
asset.loaded = true;
app.assets.add(asset);
// Add the loaded scene to the hierarchy
var gltf = new pc.Entity('gltf');
gltf.addComponent('model', {
asset: asset
});
app.root.addChild(gltf);
}, {
basePath: 'assets/monkey/'
});
});
};
// update code called every frame
LoadMon.prototype.update = function(dt) {
};
That sure limits its usefulness for us. Maybe @will can give an idea of when to expect Editor support. He seems very supportive of glTF for the long term.