Argon-aframe — Lesson 13: Loading 3D models

Download Argon4 and the Tutorial Source Code.
This tutorial uses the ferrari and resources directories.
Demo in Argon4

AR-Frame loads 3D models and materials by importing .OBJ, .MTL and Collada (.DAE) files.

=======

Method 1: Wavefront OBJ Model

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:

<ar-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>
</ar-scene>

Method 2 COLLADA Model

The collada-model component loads a 3D model using a COLLADA (.DAE) file:

<ar-scene>
  <a-assets>
    <a-asset-item id="tree" src="/path/to/tree.dae"></a-asset-item>
  </a-assets>
  <a-entity collada-model="#tree"></a-entity>
</ar-scene>

Loading Inline

We can also load assets of an OBJ or Collada model by specifying the path directly within url(). Note that 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>
<a-entity collada-model="url(/path/to/tree.dae)"></a-entity>

Troubleshooting:

Additional resources:

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