gltf-model

Note: This documentation is for the old 0.8.0 version of A-Frame. Check out the documentation for the current 1.6.0 version

glTF (GL Transmission Format) is an open project by Khronos providing a common, extensible format for 3D assets that is both efficient and highly interoperable with modern web technologies.

The gltf-model component loads a 3D model using a glTF (.gltf or .glb) file.

Note that glTF is a fairly new specification and adoption is still growing. Work on the three.js glTF loader and converters are still active.

NOTE: A-Frame supports glTF 2.0. For models using older versions of the glTF format, use gltf-model-legacy from donmccurdy/aframe-extras.

Why use glTF?

In comparison to the older OBJ format, which supports only vertices, normals, texture coordinates, and basic materials, glTF provides a more powerful set of features. In addition to all of the above, glTF offers:

Hierarchical objects
Scene information (light sources, cameras)
Skeletal structure and animation
More robust materials and shaders

For simple models with no animation, OBJ is nevertheless a common and reliable choice.

In comparison to COLLADA, the supported features are very similar. However, because glTF focuses on providing a “transmission format” rather than an editor format, it is more interoperable with web technologies. By analogy, the .PSD (Adobe Photoshop) format is helpful for editing 2D images, but images are converted to .JPG for use on the web. In the same way, glTF is a simpler way of transmitting 3D assets while rendering the same result.

In short, expect glTF models to work with A-Frame more reliably than COLLADA models.

Example

Load a glTF model by pointing to an asset that specifies the src for a glTF file.

<a-scene>
  <a-assets>
    <a-asset-item id="tree" src="/path/to/tree.gltf"></a-asset-item>
  </a-assets>

  <a-entity gltf-model="#tree"></a-entity>
</a-scene>

Values

Type	Description
selector	Selector to an `<a-asset-item>`
string	`url()`-enclosed path to a glTF file

Events

Event Name	Description
model-loaded	glTF model has been loaded into the scene.
model-error	glTF model could not be loaded.

Loading Inline

Alternatively, load a glTF model by specifying the path directly within url(). However, the scene won’t wait for the resource to load before rendering.

<a-entity gltf-model="url(/path/to/tree.gltf)"></a-entity>

Using animations

If you want to use the animations from your glTF model, you can use the animation-mixer component from aframe-extras. By default all animations are played in a loop.

<a-entity gltf-model="#monster" animation-mixer></a-entity>

More Resources

Over 100,000 glTF models are free for download on Sketchfab, and various exporters and converters converters are available:

See the official glTF specification for available features, community resources, and ways to contribute.