Sometimes we will have 3D assets that we want to add to our scene. For example, a 3D model of a television set, a frog, or a rainbow.

A-Frame provides ways for loading glTF and OBJ files. We recommend using glTF 2.0 if possible, as it is becoming the standard for displaying 3D models over the web since its release in 2015. It uses the JSON standard.

There is no HTML tag for a glTF file, so to import a .gltf file into the scene, we need to add the file to the asset management system using an <a-asset-item> element.

And then we can point to it using the <a-gltf-model> primitive:

<a-assets> <a-asset-item id="tree" src="redwood.gltf"></a-asset-item> </a-assets> <a-gltf-model src="#tree"></a-gltf-model>

Here, the <a-asset-item> element is used to load a redwood.gltf file and the <a-gltf-model> has a src attribute that points to the <a-asset-item>.

After it’s in the scene, we can transform it using position, rotation, scale, etc.

Places to download 3D models as glTF files include Google Poly, Sketchfab, and Clara.io. Programs to create models include Blender, Autodesk Maya, and Supercraft.

Note: Importing external 3D models is notoriously difficult. You may need to play around with position, rotation, and scale to get them to look the way you want (or even see it in the first place). Also, sometimes models just don’t work! Don’t get discouraged and should find other ones.



Suppose there is a glTF file that we want to include in the scene:

Add an <a-asset-item> in the asset management system with an id of character.


Now create an <a-gltf-model> element referencing the character with the src attribute and give it a:

  • position of "0 2 -4"
  • scale of "0.5 0.5 0.5"

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?