3D models come in all shapes and sizes, and there are all sorts of tools that let you create your own. There are desktop-based 3D design tools like Blender, Tinkercad, Sketchup, Paint 3D, or Maya, and also tools that let you create 3D models in virtual reality, such as Tiltbrush, Supercraft, Maquette, and Oculus Medium.
For those interested, there will be a "Basics of Blender" coming to Frame Academy in 2019. Blender is a free tool that lets you do both simple and incredibly complex 3D modeling, animation, and more. It's awesome.
Instead of creating your own models, you could also try to find models online. If you're looking for 3D models to use in your project, you can browse sites like Sketchfab, Turbosquid, or Clara. They all have lots of free content and also some paid content.
I'll show you how to find, download, and use free models from Sketchfab, my favorite gallery for 3D content. I'll also provide some example models you can use in your projects.
There are tons of 3D model file formats, but we're going to focus on one to keep it simple: glTF. If you want to learn how to import other 3D model file formats, feel free to browse the A-Frame documentation, but we recommend using glTF models because they are the easiest to work with and we'll help you through the process.
If you've already created 3D models or you have models you want to use in your gallery but you aren't sure how, ask a question in our online community and someone will help you figure it out!
All of the models you can download on Sketchfab can be downloaded in the format we need: glTF. I encourage you to make a free Sketchfab account so that you can download models from Sketchfab and later, upload your own!
To find models that you can download on Sketchfab, you can filter your Sketchfab search results so that they only include downloadable models. You can tell when a model is downloadable because it will have a little arrow icon over the thumbnail. Take a look:
I found this nice, downloadable model of a sheep on Sketchfab (see it on Sketchfab yourself here):
As you can tell, this sheep doesn't look realistic, because sheep don't look that way in the real world. This blocky, playful style is called "low-poly".
Things can look pleasant and interesting without looking real!
On the Sketchfab page for the model, look below the name of the model to find some useful stuff, including the download button, the geometry count, and its license. Take a look:
The download button will let you download the model. If you click this, a download pop-up will appear. Select the lower option to download the glTF model.
The triangles and vertices count tells you how complex the 3D model is. If a model has millions of triangles, it has very complex geometry. It's difficult to load super complex 3D models into WebVR scenes, so we recommend you use models with no more than 50,000 triangles. You also might find that more complex models work on desktop, but not on mobile. If it's important to you that your 3D site works on mobile devices like a smartphone or Oculus Go, remember to test your site on those devices!
The license tells you how you're able to use the model in your project.
Go ahead and download this sheep model as a gltf file. It will download as a zip folder. Right click on the zip folder and select the "extract" option to extract the folder. Open the extracted folder, and you should see something like this in the folder.
You might be wondering - since I only downloaded one model, why do I have a few files in my folder?
3D models have what's called a mesh. The mesh of a model gives the model its shape - its geometry. In addition to a mesh, many 3D models also have textures. Textures determine how the mesh actually shows up - its appearance.
Take a look at this 3D model. Just the mesh is shown on the left, and the mesh with textures is shown on the right.
In the folder you downloaded, you see three items. The file called "scene" is the mesh, the textures folder has all the textures, and the scene.bin file has info that integrates the mesh and textures. In order to bring your Sketchfab model into your Glitch project, you have to pack all of these files into one file. It's easy - just open up this website and drag all the files into it at once. It will automatically download your 3D model as a single, unified file in your downloads folder. Here's what it looks like:
Once you've converted your model and you have your .glb file, drag it into the "assets" folder in your Glitch Project. Find your "assets" folder in the far left of your Glitch project and click on it. You'll see I've already dragged the sheep glb model into the assets folder of my project:
After you drag something into your Glitch assets folder and you see it in there, Glitch creates a URL for it. Click on the asset and press the "Copy URL" button.
At this stage, you haven't actually brought the model into your 3D site. You've used the Glitch assets folder as a way to generate a link for your 3D model so that it's ready to be used in your HTML.
To load the 3D model in your scene, we can use the a-gltf-model element.
I'm going to give my a-gltf-model four attributes: id, position, rotation, and src:
<a-gltf-model id="sheep" position="0 0 -3" rotation="0 100 0" src="https://cdn.glitch.com/0fc2d138-1979-4b80-8bae-51eb67b7ccb9%2Fsheep.glb?1544159918188"></a-gltf-model>
I gave it an id="sheep" to help me identify what the gltf model is. The id attribute lets you give an element a unique identifier. This becomes really handy later.
I gave it position="0 0 -3" so that it spawns in front of the camera.
I'm gave it a rotation="0 100 0" because I want to spin it around a bit.
We want the src of our a-gltf-model to be the URL for the sheep model that we brought into our Glitch folder. See how to find that URL in the GIF above. You might remember this attribute because we used it before when we set the src of our script element!
I wanted a smaller model like this sheep because I knew it would fit in the gallery I've been building. but I encourage you to experiment with big models too! Here's a separate project I made that just has one large 3D model from Sketchfab:
Find a 3D model (or a few!) on Sketchfab, convert it to a .glb, and bring it into your project. Make sure the position, scale, and rotation are set so that you can see it in your scene! Continue to adjust the shapes in your scene.
Tip: You can set the background attribute on the "scene" element to change the background color of your scene. For example, to make the background of your scene blue you could have <a-scene background="color: blue"></a-scene>
