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
And then we can point to it using the
<a-assets> <a-asset-item id="tree" src="redwood.gltf"></a-asset-item> </a-assets> <a-gltf-model src="#tree"></a-gltf-model>
<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
After it’s in the scene, we can transform it using
Note: Importing external 3D models is notoriously difficult. You may need to play around with
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:
<a-asset-item> in the asset management system with an id of
Now create an
<a-gltf-model> element referencing the character with the
src attribute and give it a:
"0 2 -4"
"0.5 0.5 0.5"