Thanks to Mozilla's A-Frame, creating 3D and VR web applications is easier than ever:
Here's a little example to show how that would look in practice:
<!doctype html>
<html>
<head>
<title>My first VR web app</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<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>
</a-scene>
</body>
</html>
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.)!
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:
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:
Yet again, all these great features are not helping much, if no content is available as 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.
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.
Once you have obtained your glTF files, you can use them in your A-Frame application:
<!doctype html>
<html>
<head>
<title>So I heard millenials love Avocados...</title>
<script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
</head>
<body>
<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-asset-item id="avocado" src="https://cdn.rawgit.com/KhronosGroup/glTF-Sample-Models/9176d098/1.0/Avocado/glTF/Avocado.gltf"></a-asset-item>
</a-assets>
<!-- 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>
</a-scene>
</body>
</html>
You may try the example for yourself.
If you want to try it out for yourself, get started with Archilogic here.
%203.svg){kind=logo}