Skip to Content
Learn
Building the Scene
3D Models

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.

Instructions

1.

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.

2.

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"
Folder Icon

Take this course for free

Already have an account?