Please visit:
- https://github.com/playcanvas/engine - which now has built-in glTF 2.0 support
- https://github.com/playcanvas/playcanvas-viewer - viewer based on engine's built in glTF 2.0 support
This repo extends PlayCanvas to support glTF. It contains:
- A loader script that can convert a glTF or glB file into a PlayCanvas hierarchy.
- A viewer application that supports drag and drop of glTF and glB files.
The loader script returns a pc.Model structure. It can be used with the standalone Engine or in conjunction with the PlayCanvas Editor.
To see an example of using the loader with the Engine, check out the viewer app in this repo.
To use the loader with the Editor, simply add playcanvas-gltf.js and playcanvas-anim.js into your project (ensuring they are first in your loading order) and call the following API:
Parses an ArrayBuffer holding a binary-encoded glTF scene.
loadGlb(glb, device, done);
- glb - An ArrayBuffer holding the binary glb file data.
- device - A pc.GraphicsDevice.
- done - A Function called when the glb has loaded (either successfully or with an error). The function has the following signature: function (err, res) {}. The parameters of the
donefunction are as follows:- err - A String describing any error encountered on load. If
erris null, the load operation completed successfully. - res - An Object holding the loaded PlayCanvas objects.
- res.model - A pc.Model object representing the glTF scene
- res.textures - An array of pc.Texture objects
- res.animations - An array of AnimationClip objects
- err - A String describing any error encountered on load. If
app.assets.loadFromUrl('assets/monkey/monkey.glb', 'binary', function (err, asset) {
var glb = asset.resource;
loadGlb(glb, app.graphicsDevice, function (err, res) {
// Wrap the model as an asset and add to the asset registry
var asset = new pc.Asset('gltf', 'model', {
url: ''
});
asset.resource = res.model;
asset.loaded = true;
app.assets.add(asset);
// Add the loaded scene to the hierarchy
var gltf = new pc.Entity('gltf');
gltf.addComponent('model', {
asset: asset
});
app.root.addChild(gltf);
});
});Parses an in-memory Object hierarchy holding a glTF scene.
loadGltf(gltf, device, done, options);
- gltf - An Object representing the root of the glTF scene.
- device - A pc.GraphicsDevice.
- done - A Function called when the glb has loaded (either successfully or with an error). The function has the following signature: function (err, res) {}. The parameters of the
donefunction are as follows:- err - A String describing any error encountered on load. If
erris null, the load operation completed successfully. - res - An Object holding the loaded PlayCanvas objects.
- res.model - A pc.Model object representing the glTF scene
- res.textures - An array of pc.Texture objects
- res.animations - An array of AnimationClip objects
- err - A String describing any error encountered on load. If
- options - An Object specifying optional parameters for the function.
- options.buffers - An Array of preloaded ArrayBuffer objects holding the glTF file's buffer data.
- options.basePath - A String set to the relative path of the glTF file.
- options.processUri - A Function that provides custom loading behavior for URIs encountered during the loading process.
app.assets.loadFromUrl('assets/monkey/monkey.gltf', 'json', function (err, asset) {
var json = asset.resource;
var gltf = JSON.parse(json);
loadGltf(gltf, app.graphicsDevice, function (err, res) {
// Wrap the model as an asset and add to the asset registry
var asset = new pc.Asset('gltf', 'model', {
url: ''
});
asset.resource = res.model;
asset.loaded = true;
app.assets.add(asset);
// Add the loaded scene to the hierarchy
var gltf = new pc.Entity('gltf');
gltf.addComponent('model', {
asset: asset
});
app.root.addChild(gltf);
}, {
basePath: 'assets/monkey/'
});
});To load the glTF viewer, run a local web-server and load viewer/index.html. You can then drag a glb or gltf file onto the tab's client area to load it. For non-embedded glTF files (with external buffer and image files), you need to drag the containing folder of the glTF file onto the viewer's client area. Binaries for the viewer can be found here.
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent