Can't add custom model to a webpage

Help & Support
1

I can’t add custom model, created in Blender to a canvas on a custom webpage (with playcanvas CDN)

Error in console:

Error loading model: assets/model.dae
[TypeError: Cannot read property ‘clone’ of null]

Code:

// add model asset
var asset = new pc.Asset("amodel", "model", {
  url: "assets/model.dae"
})
app.assets.add(asset)
var modelAsset = app.assets.find("amodel", "model")

// create box entity
var cube = new pc.Entity('model');
cube.addComponent('model', {
  type: "asset",
  asset: modelAsset
});

I tried to use OBJ, DAE and FBX formats

2

Hi @Tyler_Lowell and welcome,

Your code is mostly correct, you are missing two things:

  • the asset is added to the registry, but it has also to get downloaded (load). You can use the loadFromUrl method for that.
  • the model filetypes you are trying to load aren’t supported by the Playcanvas engine. Right now only the internal Playcanvas format can be used (as generated when uploading models in the editor) and there is work being done at the moment to support GLB (https://github.com/playcanvas/engine/pull/1904).

As a workaround, you can load a custom importer for OBJ files (which have their own restrictions though) which you can use to load remote OBJ files directly. Here is an example on how to do this:

3

Can you show me please, full code listing :wink:

Maybe

var customAsset
app.assets.loadFromUrl("assets/model.glb", "model", (err, asset) => {
  customAsset = asset
})

var cube = new pc.Entity("model")
cube.addComponent("model", {
  type: "asset",
  asset: customAsset
})

or not?

4

Make sure you’ve loaded the obj loader in your app:

And then you can do something like this:

        // OBJ Parser is not enabled by default in engine. Add the parser to the model resource handler
        // set up obj parser
        app.loader.getHandler("model").addParser(new pc.ObjModelParser(app.graphicsDevice), function (url, data) {
        	return (pc.path.getExtension(url) === '.obj');
        });

        var url = "../assets/models/monkey/monkey.obj";

        app.assets.loadFromUrl(url, "model", function (err, asset) {
            entity = new pc.Entity();
            entity.addComponent("model");
            entity.model.model = asset.resource;
            app.root.addChild(entity);
        });