I recently wrapped up a series of articles called “A Vue into 3D” where I explored the idea of adding 3D development to my Vue workflow. Chapter 2 of this series deals with Babylon JS.
The example is simple and a bit contrived, but it allowed me to explore a few ways to connect Vue and Babylon JS.
I know there are a ton of ways to connect Vue JS and Babylon JS and I look forward to exploring some other ideas in the future. For now, I’m just using a simple interface object to hold some references to the Babylon JS scene and a few other objects. I create an instance of this object in Vue and can call methods on it to send data and callbacks into the scene graph. Vue only calls methods on this object. It doesn’t interact directly with any of the Babylon JS objects.
I’m interested in creating spatial UI for VR (and someday AR), so this project focused on pulling some data from an API and rendering it in a scene for VR. I added a bit of interactivity such as selecting items from a list/grid and toggling a favorite status. I used a mix of 2D and 3D GUI features, using Advanced Dynamic Texture to render data and images, and using 3D objects to organize them in space.
You can find the full series on my website. The Babylon JS chapter includes these posts:
I also wrote a short recap post for the series where I explained my reasoning for choosing Babylon JS for my future projects.
You can watch a short demo video of the scene here. https://twitter.com/vrhermit/status/1481720363008548870
I also published a Glitch with the project. You can try this out in a VR headset or check out the code here: Glitch :･ﾟ✧
I’d appreciate any feedback. Would you do something different? Are you using Vue and Babylon JS together? Are you building spatial UI with Babylon JS?
