Skip to content

Latest commit

 

History

History
165 lines (108 loc) · 7.61 KB

0900-3d-models.md

File metadata and controls

165 lines (108 loc) · 7.61 KB
title previous previoustitle next nexttitle
3D Models
3-environments
Environments
5-magica-voxel
Magica Voxel

3D Models

Warning: 3D models can be quite complex and "heavy" and should be used carefully to make sure your virtual world can be rendered quickly. If you download a 3D model, you may need to simplify it before using it. Check this page on using 3D models with A-Frame: https://aframe.io/docs/0.8.0/introduction/models.html#model-performance

A-Frame supports various types of models glTF, OBJ, and COLLADA.

glTF Models

:::example 04-3d-models-01-gltf

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 3D Models

You can find compatible 3D models easily on the Internet and use them in yours 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

Go to the first link and look for the "Mysterious Island Centurion" 3D model and download it.

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 in your browser:

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

You will notice that it has various references to other files such as textures:

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:

  1. Create GitHub account.

  2. Go to GitHub and create an account

  3. Login to your GitHub account

  4. Create repository

  5. New Repository

2. Create Repository

  1. Open your repository. Although you will see the repository immediately after you create it, follow these steps that will work even you have just logged in:

  3. Upload the model's folder

  4. Click upload:

2. Drag the folder:

2. Wait for the upload:

  1. Get the URL of the model's main file:
  2. Click on the model's folder in the repository:

1. Click on the model's main file:

1. Click view raw file:

1. Copy the URL:

OBJ Models

:::example 04-3d-models-02-obj

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 that it may be necessary to adjust the scale and rotation depending on how the original 3D model was created.

Animated Models

:::example 04-3d-models-03-gltf-animated

glTF models can have animations. See https://aframe.io/docs/0.8.0/introduction/models.html#sidebar 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="//cdn.rawgit.com/donmccurdy/aframe-extras/v4.0.2/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>

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

Exercises

Go to: https://aframe-usj-exercises.glitch.me/3d-models.html

References

Sites

A-Frame