[SOLVED] The correct way to load MeshMODEL.json And asign material

I try many method want load my josn model But they are not right,


var loadFilename = "obj/Cube.json";

var cubeModel = new pc.Entity();

cubeModel.addComponent("model", {
    type: "mesh",
    asset: app.assets.loadFromUrl("obj/Cube.json", 'model')


I try use three.js workflow; what is playCanvas work method;

PLZ give me some code example


1 Like

I go engine-only and wrote myself a load script.

So at the top of a javascript file I may have:


And that tells a special load-script that it needs to load the object ‘SixShip.json’, some script files and two sounds.

So when I load objects I do:

for (var i = 0; i < requiredobjects.length; i++) {
            url = 'Models/'+ requiredobjects[i] + '.json'
            app.assets.loadFromUrl(url, "model", function (err, asset) {
                console.log('loaded: '+asset.name)
                if (loadstate === requiredobjects.length+1) {
                    setTimeout(loadSounds, 0.1); //Move on to next segment of loading
                } else {
                    loaderdisplay('Loading Object '+loadstate+'/'+requiredobjects.length);

And when I place an object:

    lobj = new pc.Entity();
    lobj.name = "Laser"
    lobj.addComponent("model",  {
        type: "asset",
        asset: app.assets.find('Laser.json', "model")

Why do I split the adding of an object from the loading of it? Imagine if you fly your spaceship around for a few minutes, and then fire the laser. All of a sudden playcanvas goes ‘Oh no, I need to load an object’ and the object does not exist for a few seconds.

You can see this load system in action at simplesix.sdfgeoff.space and the full load script here.
Is this the correct way to do it? No idea, but it works.

1 Like

As sdgeoff shows, app.assets.loadFromUrl doesn’t return the asset (it is loading asynchronously)

This code should work:


var loadFilename = "obj/Cube.json";

var cubeModel = new pc.Entity();

app.assets.loadFromUrl("obj/Cube.json", 'model', function (err, asset) {
    if (err) {

    cubeModel.addComponent("model", {
        type: "mesh",
        asset: asset

1 Like

oh thanks my friends
work fine now
next problem is:
how creat a pbr material with texture and asign to cubeModel;
thanks again

Something like this should work.

// load diffuse texture
app.assets.loadFromUrl("texture.jpg", function (err, asset) {
    // create material
    var material = new pc.PhongMaterial();
    material.shadingModel = pc.SPECULAR_BLINN;
    material.diffuseMap = asset.resource;

    // assign material to the first mesh instance of the model
    var model = cubeModel.model.model;
    model.meshInstances[0].material = material;

thanks dave ,i know now

In PlayCanvas Editor phong and physical is difference shading model,

API Reference only show two type material:
pc.BasicMaterial and pc.PhongMaterial

whereis physical material and how creat pbs material.


It’s shadingModel on PhongMaterial: http://developer.playcanvas.com/en/api/pc.PhongMaterial.html#shadingModel