title: obj-model type: components layout: docs parent_section: components source_code: src/components/obj-model.js examples:
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-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>
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. |
Event Name | Description |
---|---|
model-loaded | .OBJ model has been loaded into the scene. |
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>
See Introduction → 3D Models → Troubleshooting.
We can find and download models on the web to drop into our scenes: