The glTF loader enables loading of glTF, glTF Binary, and glTF Drako files into Zea Engine.
This loader is based heavily on the reference glTF loading implementation from the Khronos Group and has been integrated as a plugin for the Zea Engine. As such, the code was modified to align with some of the design goals behind the Zea Engine. https://github.com/KhronosGroup/glTF
Note: the glTF Loader plugin does not support all the various advanced material configurations available in glTF. Features such as sheen, clear-coat are not currently supported, as these would first need to be supported by the engine.
Our recommended way to clone this template is by using degit, a project scaffolding tool.
- In your HTML page, after the engine script tag, add the script tags to load the Draco decoder (only required for Draco support), and the gltf-loader plugin.
<script src="https://cdn.jsdelivr.net/npm/@zeainc/zea-engine/dist/index.umd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@zeainc/zea-engine/dist/plugins.umd.min.js"></script>
<script src="https://www.gstatic.com/draco/v1/decoders/draco_decoder_gltf.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@zeainc/gltf-loader/dist/index.umd.js"></script>- After creating the scene and renderer, you can instantiate a GLTFAsset class and use that to load glTF files.
const asset = new GLTFAsset('gltf')
asset.load('url/to/file.gtlf').then(() => {
console.log('Loading done')
renderer.frameAll()
})
scene.getRoot().addChild(asset)A fully featured glTF loading sample can be found in this projects GitHub repository. https://github.com/ZeaInc/gltf-loader/blob/main/gltf-asset-test.html
clone the github repository for this project and run the following
yarn installTo test out the plugin, run the following.
yarn devThe following live demos load glTF assets from the Kronos Group github project directly. You can modify the URL to load your own data.
Khronos® and Vulkan® are registered trademarks, glTF™ is a trademark of The Khronos Group Inc.