About the glTF-Loader

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.

Getting Started

Our recommended way to clone this template is by using degit, a project scaffolding tool.

1. 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>

2. 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

Building and testing the Plugin

clone the github repository for this project and run the following

  yarn install

To test out the plugin, run the following.

  yarn dev

Live demos

The following live demos load glTF assets from the Kronos Group github project directly. You can modify the URL to load your own data.

• glTF-Draco/Avocado
• glTF-Draco/Buggy
• glTF/DamagedHelmet
• glTF/GearboxAssy
• glTF/2CylinderEngine

Credits

Khronos® and Vulkan® are registered trademarks, glTF™ is a trademark of The Khronos Group Inc.