The obj-model component loads a 3D model and material using a Wavefront (.OBJ) file and a .MTL file.


We can load an .OBJ model by pointing to assets that specify the path to an .OBJ and .MTL file.

<a-asset-item id="tree-obj" src="/path/to/tree.obj"></a-asset-item>
<a-asset-item id="tree-mtl" src="/path/to/tree.mtl"></a-asset-item>
<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>


objSelector to an <a-asset-item> pointing to a .OBJ file or an inline path to a .OBJ file.
mtlSelector to an <a-asset-item> pointing to a .MTL file or an inline path to a .MTL file. Optional if you wish to use the material component instead.


Event NameDescription
model-loaded.OBJ model has been loaded into the scene.

Loading Inline

We can also load assets by specifying the path directly within url(). Note this is less performant than going through the asset management system.

<a-entity obj-model="obj: url(/path/to/tree.obj); mtl: url(/path/to/tree.mtl)"></a-entity>


If you don’t see your model, try scaling it down. OBJ models vertices commonly have large scales of units in comparison to A-Frame’s unit of meters.

Additional Resources

We can find and download models on the web to drop into our scenes: