INTRODUCTION

What you'll learn

This post provides a conceptual overview of how to combine a modern JavaScript Framework, with a WebGL Framework, in order to make your 3D scenes data-driven!

Interested? Let's begin!

Prerequisites

You'll need a decent knowledge of modern frontend development - including restful-driven, data-binded, component-based applications (buzzword-dropping intended); as well as a basic WebGL knowledge and understanding of 3D Objects.

The Notes

This post is not a tutorial covering a specific task. Instead it is a technical concept on how to use your data to create and update your 3D Scenes. There are a lot of useful scenarios for this concept. I'll get to some of them at the end - so your patience will pay off.

I should also mention - the example code shown in the following is not production-ready, but I'm pretty sure you can make this happen!

Vue.js 2.0

Vue.js is yet another Javascript Framework, one of those which seems to evolve every moment. Maybe vue.js is even THE Javascript Framework. Since version 2 vue.js seems to have matured. If you need to spice up your user-interface with interactive components, binded data and more, this might be your new best friend.

A-Frame

Aframe.js on the other hand, is Mozillas answer to the growing demand of web-based virtual reality experiences. Most of these experiences utilize WebGL. Aframe.js wraps ThreeJS - one of the most important Javascript Toolkits for this task, into a HTML-Component System. And this HTML Components can easily be combined with vue.js - this is where the magic happens

HANDS ON

Start by building a basic scene

This article assumes that you already have a basic starter file to work with, which includes a reference to vue.js and aframe.js and of course a HTML-file to start from.

So let's skip ahead and start with building an actual 3D Scene. This is as easy as ABC. Just add a <a-scene> to your HTML. By adding a single tag, we initialize a ThreeJS - scene automatically.
For the sake of this tutorial and to have something visible, let's add some random geometries to our scene. With aframe.js this also easy. Just add some <a-entity> and give those tags some attributes. If you don't know how to work with the aframe-component-entity-system yet, here you'll find help! Let's assume you know everything about it.

After adding those random geometries with some random positioning, even more random texturing and most random scaling, your basic scene DOM could look like this:

Remember this article isn't about building a magical, web-based 3D Scene, but about feeding your magical web-based 3D Scene with data. You can basically get this data from everywhere (like your database or your clients paper note in his pocket (which you should maybe digitalize at some point)).

Since you know everything about the aframe-component-entity-system, you know that you can fill your entities with help of common attributes, like we did in the example above.

Now finally, the fun part starts - don't hardcode those attributes, but bind them with your data and with help of vue.js! So we...

Add our first vue.js component

Let's assume you know everything about vue-components as well (if not, help is on the way). So we might have a component like this one:

So you don't need to be Albert Einstein to see: This data looks a lot like the attributes we use in our aframe entities to define their appearance!
Getting closer to the final part. Now we need to replace the value of those attributes with our fresh data.

Use data in our vue component

We use this data in our vue component to render our random geometries. To do so - we need to bind the data to our template. In vue.js it works like this:

This results in aframe.js rendering those WebGL scenes dynamically for you.

More magic? Need to bind a click event? Say no more! Let's assume we want to give our geometries a random scale when a user clicks it.
To do so, first add a DOM event listener to each geometry like this:

(Again, use shorthand syntax for event listeners, like @click to save yourself some chars)

We need to implement this new method clickHandler to the surrounding component in it's methods property. All methods implemented in there, will be added to the components scope. Therefore, they're available both in the components template and it's this. So let's implement our handler:

First we filter our geometries in the handler method by it's unique ID. Then we just concat() a String with random Int values from range 1 - 5 for altering the items scaling property. Aframe.js demands for converting those values to a string.

There's still more magic waiting for you. But we won't go into detail now, since I hope you already got the idea and you can't wait to build your own data-driven 3D world!

HANDS OFF - FINAL WORDS

We finally made it - a short introduction to a technical concept! Hopefully some of you dear readers, got an idea of how useful it could be to combine a modern Javascript application framework with aframe.js to create WebGL scenes. The few examples given in this post are very basic, but it's a starting point. And since modern browsers are getting better at rendering complex 3D stuff and 3D stuff itself gets so important nowaydays - it should not be too hard to think about useful scenarios for a development concept like this. These are some scenarios I came up with:

presenting your clients 3D Models products in their webshops, enabeling them to position and create hotspots with notes and links via the underlying Content-Management system

a Web-VR application for your Mom's knitting group, enabeling them to see 3D instructions for difficult patterns through their VR glasses. You (as her favorite child) add content to this application simply by adding complex algorithms to a CSV File

Now it's your turn! Thanks for reading. Good luck and have fun with your own projects!