obj-model

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

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

Example

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

<a-scene>
<a-assets>
<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-assets>

<a-entity obj-model="obj: #tree-obj; mtl: #tree-mtl"></a-entity>
</a-scene>

Properties

Property Description
obj Selector to an <a-asset-item> pointing to a .OBJ file or an inline path to a .OBJ file.
mtl Selector 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.

Events

Event Name Description
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>

Troubleshooting

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: