How to load multi file assets?

[kungfooman]

I am not sure how the API is supposed to work:

viewer.load([
"http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.gltf",
"http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.bin"
]);

The AppleTree got these files:

Result:

playcanvas.js:24239 failed to load uri=AppleTree.bin

[slimbuck]

Hi @kungfooman ,

Try specifying the files as objects with url and filename properties. The filename is used to match internal references. Check out the drop handler.

Hope that helps!

[kungfooman]

Hi @slimbuck, thanks for the info!

Got it working like this now:

viewer.load([{
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.gltf",
    filename: "AppleTree.gltf"
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree.bin",
    filename: "AppleTree.bin",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_baseColor.png",
    filename: "AppleTree_baseColor.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_roughnessMetallic.png",
    filename: "AppleTree_roughnessMetallic.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_normal.png",
    filename: "AppleTree_normal.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_baseColor1.png",
    filename: "AppleTree_baseColor1.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_roughnessMetallic1.png",
    filename: "AppleTree_roughnessMetallic1.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_normal1.png",
    filename: "AppleTree_normal1.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_baseColor2.png",
    filename: "AppleTree_baseColor2.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_roughnessMetallic2.png",
    filename: "AppleTree_roughnessMetallic2.png",
}, {
    url: "http://127.0.0.1/libwebgame_assets/gltf/AppleTree/AppleTree_normal2.png",
    filename: "AppleTree_normal2.png",
}]);

Isn't it a bit strange that people have to reference every single file? In playcanvas-gltf people only have to define basePath (which even can be derived from a single URL in lots of cases)

[slimbuck]

Hi @kungfooman,

The next release of the viewer is a big change which includes the ability to load a gltf using its URL alone. The basePath is derived from the URL though, it can't be specified.

Hope this helps!

[willeastcott]

I think this is now supported, right? So we can close this?

[kungfooman]

Just built HEAD and it doesn't work with Viewer#load at least:

[willeastcott]

How are you even able to see viewer using the latest codebase?

Now that the viewer is built with Webpack, that variable is not visible from the JS console.

[kungfooman]

window.pc = pc;

function startViewer() {
    var viewer = new Viewer(document.getElementById("application-canvas"), onSceneReset, onAnimationsLoaded, onMorphTargetsLoaded);
    registerElementEvents(viewer);
    window.viewer = viewer;
}

[willeastcott]

Ah ok, so you've exposed the variable yourself. I also see the problem now:

Looks like dependencies aren't loaded for unpacked glTF scenes still. I think it's best to wait for @slimbuck to comment.

[slimbuck]

Hi @kungfooman, @willeastcott,

This will work correctly once the next version of engine has been released, as it requires playcanvas/engine#2312.

Thanks!

[slimbuck]

https://github.com/playcanvas/engine/releases/tag/v1.32.3

This should now be fixed! (Please reopen if you any further issues).