Using dynamic models

Hello,
I am developing a project in PlayCanvas. I have multiple items in my project and it is working fine. But now there is a need to add many more items and which will make the project and build large in size. I have an organisation plan but still it will not be a good idea to store 1000 of items in the project.
I used this sample code to use the model dynamically when needed -

var Sandbox = pc.createScript(‘sandbox’);

Sandbox.URL = ‘https://raw.githubusercontent.com/yaustar/3dmodel-Playcanvas/master/shipfinal/shipfinal.json’;

Sandbox.prototype.initialize = function() {
this.app.assets.loadFromUrl(Sandbox.URL, “model”, function (err, asset) {
console.log(asset);
var entity = new pc.Entity();
entity.addComponent(“model”);
entity.model.model = asset.resource;
pc.app.root.addChild(entity);
entity.setLocalPosition(-1,1,-2);
});

var s = this.entity.script.create('testing');

};

It is working very fine but now copied the above json model into my system localhost. I am being able to access the json over browser but using the same URL in above mentioned code then getting the error. The url I used in place of above url is - http following my system’s IP address and then the json file path. Temporarily I changed the PlayCanvas launch url from https to http and request gets succeeded but errors are still there. Here are the errors I am getting on my browser’s console -

  1. Failed to load http + ://172.19.81.113/xxxxxx.mapping.json: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://launch.playcanvas.com’ is therefore not allowed access.
  2. Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () at Object._onSuccess (playcanvas-stable.dbg.js:21048) at Object._onReadyStateChange (playcanvas-stable.dbg.js:21018) at Object. (playcanvas-stable.dbg.js:20982)
  3. Uncaught TypeError: Cannot read property ‘mapping’ of null at AssetRegistry._loadMaterials (playcanvas-stable.dbg.js:35468) at Array. (playcanvas-stable.dbg.js:35457) at ResourceLoader. (playcanvas-stable.dbg.js:33006) at Object.callback (playcanvas-stable.dbg.js:33358) at Object._onError (playcanvas-stable.dbg.js:21067) at Object. (playcanvas-stable.dbg.js:20985)

I also replace the json on my local system with json downloaded from PlayCanvas scene of one of the model and kept the whole downloaded folder with the json mentioned but getting the same errors again and again.

I am a noob, I have searched a lot about the issue but not getting the exact way to do so. Please help me out of these errors.

3 things:

  1. If the PlayCanvas app is on https, than the models also need to be on https
  2. The server that is hosting the models needs to be configured to serve JSON
  3. The server needs to be configured correctly for CORS (ie hotlinking) so the files can be access from another domain.
1 Like

Thanks yaustar. It worked.

1 Like