5. Your First 3D Model
This is a series on using WebXR to build immersive content. To access the other blogs in the series, follow this link.
3D models are simply a representation of any surface of an object in three dimensions. There are a host of sites offering 3D models. Some popular ones are:
Apart from this, you can also create your own 3D models. Some popular tools are:
I personally like to use Sketchfab to download 3D content. Next, I’ll show how to find, download and use free models from Sketchfab.
For the 3D file format, we’ll use glTF as it has gained adoption as the standard for transmitting 3D models over the Web.
I’ll go with a skull model. You can see a “Download 3D Model” option. After clicking there, it asks for a format, so download with the glTF format.
After extracting the zip folder, you may have 2 or 3 files depending on the model you downloaded:
- scene.gltf: It defines the mesh of your 3D model. Mesh gives the model its shape and geometry.
- textures: This folder gives the appearance to your model.
- scene.bin: This file contains information to integrate the mesh and textures to give a final look to your 3D model.
To use this 3D model into your Glitch project, we need to wrap all these files in a single file. The easiest way to do this is by using GLB Packer. Just drop your files and you’ll receive a single file out.glb as output.
GLB files are a binary version of the GL Transmission Format (glTF) file, which uses JSON (JavaScript Object Notation) encoding. So, supporting data (like textures, shaders, and geometry/animation) is contained in a single file.
We can either upload or drag out.glb into the assets folder of our Glitch project. After it gets uploaded, Glitch will generate a URL for it. You can click on the asset and press the “Copy URL” button.
Note: You have used the Glitch assets folder as a CDN to generate a link for your 3D model so that it is ready to be used in the HTML. You haven’t actually brought the 3D model into your 3D site !!!
To load the 3D model inside your scene, there are a couple of options:
1. Use <a-gltf-model> element
<a-scene>
<a-gltf-model id=”skull” position=”0 0 -3" rotation=”0 50 0" src=”URL”></a-gltf-model>
<a-scene>id is just a unique identifier for our model which can be used as a placeholder.
src is the URL for our asset.
position is set so that model spawns in front of our camera.
This approach works if the number of 3D models in your project is low. Otherwise, loading a large number of models may result in a lag especially if the models are large. Some things will show up while others are still loading and overall it just makes for a crummy experience for the user. So, this is where Asset Management System comes handy.
2. Use Asset Management System.
You can preload assets so that they will load and cache in the browser as soon as your WebXR site loads, improving the performance of your site and preventing lag as the user loads your site.
<a-scene>
<a-assets>
<a-asset-item id="skull" position="0 0 -3" src="URL" response-type="arraybuffer"></a-asset-item>
</a-assets>
<a-entity gltf-model="#skull"></a-entity>
</a-scene><a-assets> holds all the assets you want to preload.
Each <a-asset-item> is preloaded when a scene starts so this approach is better in preventing lag when loading our scenarios.
The response-type=”arraybuffer” just helps the browser understand the specific kind of model you’re throwing at it — a unified glTF file.
Note: Array Management System comes handy for storing multiple types of preloaded assets like images, audio, video, 3D models and many more.
Preloading assets inside of <a-assets> doesn’t actually make the assets play or show up in your scene. It simply pre-loads them so that they are readily available and stored in the browser. Notice that we are referencing the asset with id=”skull” using # sign before the id name.
You can also download 3D models with pre-built animation into your project. To use the animations, you can use the animation-mixer component from aframe-extras. By default all animations are played in a loop.
First, include a <script> inside <head> of your index.html
<head>
// …
<script src=”https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.0/dist/aframe-extras.min.js"></script>
<head>Now you can use animation-mixer as a component.
<a-entity gltf-model=”#skull” animation-mixer></a-entity>Next, we’ll see how relative positioning works and a cool tool to make our lives easier!!
See you in the next one.
YoungSphere crowdsources immersive content for K12 education. Contribute your AR/VR content at www.youngsphere.com to earn monetary credits.
