obj-model

优质

小牛编辑

111浏览

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.