Load 3D models at run time from a PlayCanvas application

Hi, everybody.

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?

Thanks in advance.

Hi Tong,

Thanks for your reply.

I mean AT RUNTIME. I know I can drag an FBX in the editor and PlayCanvas converts it into JSON, but that is not what I need.

How can a I load an FBX using a script?

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.

Then you can tell the asset registry to load the model asset which will send an event when it has finished loaded: More can be found here: https://developer.playcanvas.com/en/tutorials/?tags=assets


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.

What are you trying to do as an end result?


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.

What errors do you get in the console?

I see.

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?

It’s different if you want to load local files. Due to security reasons, it has to be a user defined action and therefore you can’t simply have a URL.

I haven’t tried this myself, but it looks like you are looking for something like this: https://stackoverflow.com/questions/3582671/how-to-open-a-local-disk-file-with-javascript

Hello - I know this is an old topic but, which 3d sw did you use to export? I am struggling with using Blender and an old ioThree-exporter (as shown here: https://www.electronicarmory.com/articles/exporting-blender-models-to-threejs-webgl/)

Cannot make file pattern of the jsons fit :-/

The code suggest that you used 3d software with the string ‘monkey’ inside it? {line 10 of sandbox.js: ‘// Using the monkey patch version’}

I’m not sure exactly what you’re trying to do. But to get 3D models into PlayCanvas by loading them via the API, you have a few options:

  1. Use the glTF loader. There are glTF exporters for various 3D modelling apps and also a good FBX to glTF converter.
  2. Upload an FBX/OBJ/DAE file to the Editor and download the generated model asset ZIP file. This Engine example does that. The asset is here.
  3. Load OBJs directly. This Engine example does that. It uses this OBJ loader script that is provided as an example.

I would go with either 1 or 2 personally (since OBJ is not a great file format for a number of reasons that I won’t go into right now).

1 Like

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.

ok, need a little help here … the https://github.com/playcanvas/playcanvas-gltf -instructions are apparently not so straight frwd - at least not to me.

I have:

  • with code:
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;

    // Add the loaded scene to the hierarchy
    var gltf = new pc.Entity('gltf');
    gltf.addComponent('model', {
        asset: asset
}, {
basePath: 'assets/monkey/'

// update code called every frame
LoadMon.prototype.update = function(dt) {

for record: LoadPyra.js is quite similar

Example: https://playcanvas.com/editor/scene/849686 (with external URLs)
Example: https://playcanvas.com/editor/scene/849692 (Editor version with the gltf renamed to JSON for the editor to load the asset correctly)


Yaustar must soon have earned a cape … anyways; I at least have [SOLVED] my sub-problem within the main issue (posted by other user)

1 Like

Am I missing something? I can see the glTF model when I launch, but not in Editor. Is that normal?

Yep, gltf is not supported in editor yet.

OK. Thanks.

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.