Share
Share
Share
Share
3D models of architecture for your 3D and VR A-Frame apps
A-Frame is great to build 3D and VR web apps but finding great content is hard. Learn how to use Archilogic to create A-Frame apps with 3D content from Archilogic using glTF
Getting started with 3D and VR on the web: A-Frame
Thanks to Mozilla's A-Frame, creating 3D and VR web applications is easier than ever:
- Include the JavaScript library
- Use HTML to define your 3D content
- Upload your files
Here's a little example to show how that would look in practice:
<!doctype html>
<html></html>
<head></head>
<title>My first VR web app</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<body></body>
<a-scene></a-scene>
<!-- this is the "stage" of your 3D content -->
<a-entity camera="" position="0 1.6 5"></a-entity> <!-- We move the camera around a bit -->
<a-entity light="type:directional;castShadow:true" position="0 10 0"></a-entity> <!-- Have a light shining down on our scene -->
<a-entity light="type:ambient; intensity:0.5"></a-entity> <!-- and some ambient lighting -->
<!-- now we add three objects -->
<a-box color="red" rotation="45 45 45" shadow="castShadow: true" position="2.5 1 1.5"></a-box>
<a-sphere color="blue" position="-2.5 1 1.5" shadow="castShadow: true"></a-sphere>
<a-torus-knot color="green" shadow="castShadow: true" position="0 2 0"></a-torus-knot>
<!-- and some "floor" -->
<a-plane scale="8 5 10" shadow="receiveShadow:true" rotation="-90 0 0" color="lightgreen"></a-plane>
If you wish, you may see and play around with it in your browser.
You can also use this application in VR with a WebVR-ready browser and a VR headset (such as HTC Vive, Oculus Rift, Google Cardboard, Samsung GearVR, Daydream, etc.)!
How to use 3D models in A-Frame
A challenge when building A-Frame applications is finding 3D models for the application content.
This begs the question: How to get 3D content into your A-Frame application?
A-Frame supports two formats out of the box:
While OBJ models are pretty much everywhere to be found, the format has a few downsides to it:
- it's not a hierarchical format for storing entire scenes
- limited material capabilities
- text-based format (quite large files)
- no support for animations
COLLADA is a format aimed mostly as an interchangeable format between 3d applications, and although it is quite complete, it is too heavy for web use.
glTF on the other hand, while hard to find at the moment, has a bunch of very useful features, such as:
- Flexible material system, including custom shaders
- Physics-based rendering (PBR) for a more realistic look
- Support for animations and skinning
- The ability to embed all necessary data into a single file
- An extension system
- It may contain an entire scene, including lighting and camera information
Yet again, all these great features are not helping much, if no content is available as glTF...
Exporting to glTF
Luckily, there are a few options to obtain glTF 3D models.
Besides the collection of glTF example models you can use the Blender addon https://github.com/KhronosGroup/glTF-Blender-Exporter to export glTF from the free Blender 3D editor or use the collada2gltf command-line tool to turn you DAE files into glTF.
Alternatively, using just your browser and an Archilogic account, you can drag & drop your 3D models from OBJ into glTF.
Exporting Archilogic models
Alternatively - and especially when you need some 3D model for the setting and environment of your application, you may want to use an Archilogic model itself. For instance, you may browse the Archilogic 3D gallery of popular architecture, but also design and visualize your own models.
Using glTF models in A-Frame
Once you have obtained your glTF files, you can use them in your A-Frame application:
<!doctype html>
<html></html>
<head></head>
<title>So I heard millenials love Avocados...</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
<body></body>
<a-scene></a-scene>
<!-- this is the "stage" of your 3D content -->
<a-entity camera="" position="0 1.6 5"></a-entity> <!-- We move the camera around a bit -->
<a-entity light="type:directional;castShadow:true" position="0 10 0"></a-entity> <!-- Have a light shining down on our scene -->
<a-entity light="type:ambient; intensity:0.5"></a-entity> <!-- and some ambient lighting -->
<!-- we define our gltf model -->
<a-assets></a-assets>
<a-asset-item id="avocado" src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/9176d098/1.0/Avocado/glTF/Avocado.gltf"></a-asset-item>
<!-- displays the avocado at half the size and allows using the mouse to turn it around -->
<a-entity gltf-model="#avocado" look-controls="reverseMouseDrag:true" scale="0.5 0.5 0.5"></a-entity>
<!-- and some "floor" -->
<a-plane scale="8 5 10" shadow="receiveShadow:true" rotation="-90 0 0" color="lightgreen"></a-plane>
You may try the example for yourself.
Try it out!
If you want to try it out for yourself, get started with Archilogic here.
