A Vue into 3D – Introduction

This is the first post in a new series that I’m starting called “A Vue into 3D”. Over the last two years I’ve shifted my focus towards front-end development. While I’ve spent time with several frameworks and libraries, Vue JS is the one that clicked for me the most. It allows me to leverage my existing skills as a “regular” (no-framework) web developer while adding new features and abilities to my toolkit.

I’ve also spent a fair amount of time working with 3D web libraries, mostly because of my personal interest in VR. I started with A-Frame and have dabbled in Three JS a bit. I’ve also learned my way around Babylon JS. I have a strong interest in building interactive 3D and VR user interfaces that could extend or replace existing workflows. While I’ve made some progress working with these libraries, I find myself missing the state management and component system that Vue has to offer.

The purpose of this series is to explore various approaches to getting these 3D libraries working with Vue. I don’t just mean “get them working in Vue” but with Vue. To me that means two-way communication between Vue/Vuex state and the objects in a 3D scene. Updating data in Vue should update the scene/objects and updating objects in a scene should update the state in Vue.

Roadmap

• Introduction: (you are here) Create a simple project template that I can use as the basis for these experiments (done, see below)
• Chapter One: A-Frame – This seems like the best place to start. A-Frame as a lot going for it and it is easy to get started. Since A-Frame can be treated as HTML, I can build scenes and objects using Vue single file components. I’ve dabbled a bit with this in the past, so I have a head start on this chapter.
• Chapter Two: Babylon JS – While I may not be an expert of Babylon JS, I do feel like I know my way around. Their documentation is great, and they recently added some articles that can help me get started. Babylon JS has really nailed it with the XR controller abstraction layer, making it easy for me to build WebXR scenes that can run on many devices without having to manage the controller input schemes. This–along with many other features–makes Babylon JS attractive to me.
• Chapter Three: Three JS – I’ve been slowly learning my way around Three JS using the Three JS Journey course. Three JS has a huge community, and it is the backbone of many projects, including A-Frame.
• Bonus Chapter(s): I may also look at PlayCanvas as part of this series. I haven’t worked in PlayCanvas yet, but it looks interesting.

Project starting point

I’ve created a super simple CodeSandbox project template that I’m going to use as a starting point for each of the projects/experiments. You can check out the template here. I tried to keep this as simple as possible. No Router, no Vuex (yet). I wasn’t concerned with making this look good, as every bit of UI in this project will be replaced with an HTML <canvas> that loads a WebGL scene.

This project template only does a few things.

• Loads some data from the Extended Collection
• Page between data in sets of twelve
• Toggle a favorite value which is stored in Local Storage

I’m going to try to use CodeSandbox for all the experiments and demos that I produce as part of this series. I love how easy it is to fork a template and start coding. It’s also easy to throw away a project when I’ve gone down a path that doesn’t work.

I have some ideas of the types of features that I want to work on in each chapter. I may not get to all of these, but here is my current list.

• Loading API data as 3D cards
  • Grids of cards
  • Lists of cards
  • Explore various display options for the cards
  • Explore WebXR interaction options for the grids, lists, and cards
    • Toggle controls for favorite status
    • Display and layout objects
    • VR controller interaction
    • Hand tracking interaction
• Loading a list of favorites
  • Let the user position their favorite objects around the scene
  • Save 3D transforms in local storage
  • Export data from local storage in a user readable format

I’m not sure how long this series will take. I’m guessing that each chapter will be made of several blog posts, as I’ll want to share what I learn along the way. I plan to start with A-Frame and Vue sometime in the next week or two. I’ll start posting updates as soon as I have something interesting to share.