obj-model
优质
小牛编辑
135浏览
2023-12-01
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 componentinstead. |
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:
- Sketchup’s 3D Warehouse- Repository of models.
- Clara.io- Repository of models.
- Blender- A free open-source 3D modeling program with plenty of existing learning resources to create models.