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.

Download fbx model with texture
Any plans to support larger applications made from multiple projects?

Of course you can upload fbx files .PlanCanvas will turn it into a json file ,you should use the json file in you scene .

How to load assets runtime
Adding geo at runtime

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

Configurator development suggestion
[SOLVED] Merging projects
Adding geo at runtime redux
[SOLVED] Question on Clearing up storage
Importing 'raw' JSON from other projects


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.

[SOLVED] Reading an OBJ file from a remote website

What are you trying to do as an end result?


I get you right now .fbx can’t be used in web gl directly ,only json.



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