Import 3D Model to A-Frame AR
In the previous article, we learned how to create a simple AR application using A-Frame. I used a predefined 3D model to demonstrate how A-Frame works. In this article, we learn how to import a 3D model to our application and use it as a floating object in our AR world.
3D model
You can create your own 3D model using a variety of applications. I recommend using Blender which is a free, open-source application with tons of features. In this article, I’m not gonna create a 3D model from scratch. But I will show you how to use Blender to convert 3D models. In our A-Frame application, we need to have .gltf models. If you have a different 3D model type, you can easily use Blender to convert it to Gltf.
Once you open the Blender, there’s a default object and a light source on the current project. You need to get rid of these before importing your 3D model.
Select the object and the light source and delete them. Then from the menu, select File > import > and the 3D model type that you already have. At this step, you can browse for the file and import your object to Blender. The next step is to export your object to another extension which in our case it will be .gltf. Go to File > Export > glTF 2.0.
In this step, you can choose a name and destination and export your object. Done! Now, you have your 3D model ready to use in A-Frame. Keep in mind that you will need all files and folders that blender creates for your model. When you export your model to glTF, it creates a directory containing one .gltf and one .bin file along with a folder named textures. So, move all of these files to your application directory. For instance, I moved my files besides my index.html file.
3D Model Source
For this article, I am using sketchfab to download a 3D model. It has lots of models and you only need to create an account to access all of these models. There are free models as well. So, you can search for anything and download any model that might be of your interest. I downloaded a 3D model of my favorite car Ford Mustang. You can find it here: Ford Mustang 3D Model. Sketchfab provides glTF models as well. So, you don’t need to covert the model. Just download and enjoy! Just remember that you should unzip the file. Because A-Frame needs to access the model files, it does not know about a zip file.
Use 3D Model in A-Frame
In this step, we want to use our 3D model in the A-Frame application. A-Frame has an HTML tag for using gltf models.
<a-gltf-model position="0 0 0" src="/path/to/your/3DModelFolder"></a-gltf-model>In this example, I am using a Hiro marker to keep my 3D model in the middle of the marker and make it move along with the marker. You can access the full source code here. This is a very basic sample to import 3D models to your a-frame application. I will continue to make the source more exciting with more features and simple tutorials.
How to Run My Application?
When we are developing a new application we don’t need to host it somewhere to see its results. You can have a simple host your local machine and see how your application looks like in the browser. There are a variety of ways to make a local server on your machine. But, one of the easiest ways is to have a Visual Studio Code on your machine. It is an open-source and free IDE that allows you to edit your HTML file and helps you so much as you proceed. Also, it has a Live Server extension. Once you install this extension, it allows you to run your code with a single click and you will see your application in the browser.