13. 3D Models

A-Frame supports two types of models: glTF (or GLB) and OBJ .

glTF models

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

The above example shows how to load and display a glTF model. Note that we use a generic <a-asset-item> element to load the model:

<a-asset-item
  id="avocato"
  src="https://raw.githubusercontent.com/KhronosGroup/glTF-Sample-Models/master/2.0/Avocado/glTF/Avocado.gltf"
></a-asset-item>

To include the model in the scene, we use the <a-gltf-model> primitive.

<a-gltf-model position="0 1.6 -2" scale="4 4 4" src="#avocato"></a-gltf-model>

Since models may come in many different sizes, we may need to scale them (in this case the model is scaled up 4 times, but it may have to be scaled down if it is too large).

Finding glTF models

You can find compatible 3D models easily on the Internet and use them in your projects (don't forget to give proper credit to the authors of the 3D models you use).

Here is a short list of sites that provide glTF models:

1. https://sketchfab.com/features/gltf
2. https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0

Uploading Models

Most 3D models require more than one file to render properly. If you look at the Centurian model in the example and view the source file (https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/centurion/centurion.gltf) in your browser (and scroll a bit down). You will notice that it has various references to other files such as textures (Figure 1).

These files are located in the same folder as the main model file centurion.gltf.

Since Glitch (this site you are using) does not support uploading folders, to host our models we are going to use GitHub.

Follow these steps to create an account, upload a model folder, and use it in your project:

Create GitHub account and repository

1. Go to GitHub and create an account
2. Login to your GitHub account

3. Create a repository (you only need to this once; you can then use the same repository for all models.) Figure 2 shows the steps to create a repository.

Upload the model

1. Open the repository you just created. Although you will see the repository immediately after you create it, following these steps will work even if you have just logged in (Figure 3).

2. Click upload files (Figure 4).

3. Drag the folder corresponding to your glTF model (you first need to unzip the file). Figure 5.

4. Wait for the upload and commit. You need to wait for all files to finish uploading (it may take some time), enter a message in the "Commit description" text box, and then click the "Commit changes" button (Figure 6).

Get the URL of the model's main file

1. Go to your repository and click on the model's folder (Figure 7)

2. Click on the model's main file (the main file is usually named the same as the folder). Figure 8.

3. Click "view raw" file (Figure 9).

4. Copy the URL (Figure 10).

5. That is it! You can now paste the URL in your project as an <a-asset-item>

OBJ Models

You can also use 3D models in the OBJ format. Just like glTF, OBJ may require several files (.obj, .mtl, image files), so it is best to upload them to GitHub as we did before.

To use an OBJ model, you should define two assets: the .obj file and the .mtl files:

<a-asset-item
  id="baltazar-obj"
  src="https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/baltazar/baltazar.obj"
></a-asset-item>
<a-asset-item
  id="baltazar-mtl"
  src="https://raw.githubusercontent.com/jorgecardoso/aframe-usj-models/master/baltazar/baltazar.mtl"
></a-asset-item>

And then use it in the scene using an <a-obj-model> entity:

<a-obj-model
  src="#baltazar-obj"
  mtl="#baltazar-mtl"
  scale="2 2 2"
  rotation="-90 -90 0"
  position="0 1.6 -2"
></a-obj-model>

Notice how you need to specify both the .obj and the .mtl files. Also, as with any model, it may be necessary to adjust the scale and rotation depending on how the original 3D model was created.

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

Animated glTF models

glTF models can have animations. See https://aframe.io/docs/1.5.0/introduction/models.html#animating-models for more on how you can create animated glTF models.

If the 3D model has animations, we can display them in A-Frame using an external component. This component is the A-Frame Extras that we used earlier and it needs the following <script>:

<script src="https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.4.0/dist/aframe-extras.min.js"></script>

The way to include the model in our scene, remains the same, we just need to add the animation-mixer attribute to specify which animation clip the model should use (animation clips inside the model usually have names that we must know before-hand):

<a-gltf-model
  position="0 0 -3"
  scale="3 3 3"
  src="#wolf"
  animation-mixer="clip: 04_Idle"
></a-gltf-model>

Click to load.
Use keys 'w', 'a', 's', 'd' to move around.
Mouse to look around.

The example uses an animated wolf model that you can see (and test the various animations) at:
https://sketchfab.com/models/f3769a474a714ebbbaca0d97f9b0a5a0

Creating 3D Models with Magica Voxel

A voxel (volume element) is like a 3D pixel: a cube with a color. A voxel editor allows us to create 3D objects composed of voxels by manually defining the color of small cubes inside a volume.

Magica Voxel is one such editor. If you are used to using a different 3D modelling software such as Blender or Maya, you can use those to create models for using in your A-Frame project!

Installing Magica Voxel

Magica Voxel is free software.

1. Go to: https://ephtracy.github.io/
2. Download the version latest version for your operating system (Figure 1)
3. Unpack and run the application

Basic operation

Moving around

Creating a new object

Placing and editing voxels

Exporting

Tutorial

A tutorial from the Magica Voxel website:

Optimizing

The 3D models exported by Magica Voxel are not optimized and may run slowly in A-Frame if you use too many 3D models. To optimze the models, you may use Blender. Check out the following video:

Exercises

3DModels-01

Create a copy of your solution to exercise Environments 01 and add to it the 3D model of the avocato from example 0900-3dmodels-01-gltf. Try placing this model over the cylinder.

Click to open in new tab

3DModels-02

Find and download a model from Sketchfab (for example this robot: https://sketchfab.com/models/21944828c5b04a80bc402c32b3ee17ea ). Go through the process of described in this chapter for creating a GitHub account and uploading the model you have just downloaded. Use that model in the scene from the previous exercise and replace the avocato

3DModels-03

In Magica Voxel, create a model of a house, export the model to OBJ, upload it to your GitHub account and add it to a copy of exercise Environments 01

References

• 3D Models
  • https://sketchfab.com/features/gltf
  • https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0
  • Animated wolf model
  • https://sketchfab.com/models/f3769a474a714ebbbaca0d97f9b0a5a0#download