A Month of Babylon JS

Throughout the month of March 2021, I set out to learn everything I could about Babylon JS.

Babylon JS Day 20
|

Babylon JS Day 20

Today is the final day of my A Month of Babylon JS education project and the last of the “Project Fridays”. I set out to build a simple golf demo for WebXR. I didn’t complete a full demo but I did get a few things done and I learned a lot about working with physics…

Babylon JS Day 19
|

Babylon JS Day 19

Today I worked on importing a golf club model and attaching it to a VR controller as a child object. I started off by setting up an AssetsManager for the scene, then importing a model. I’m using the blue club from the Minigolf Kit from Kenney game assets. I’m really starting to like the AssetsManager…

Babylon JS Day 18
|

Babylon JS Day 18

I didn’t have much time to work on Babylon JS today, but I did have an idea for what I want to build for the project on Friday. Since receiving the Oculus Quest 2 last fall I’ve been playing Pro Putt quite a bit with friends. Sometimes we talk about different game mechanics that we…

Babylon JS Day 17
|

Babylon JS Day 17

Today I learned about teleportation in WebXR with Babylon JS. I used the default experience helper to add WebXR to my scene, so teleportation is available by default. The only thing I needed to provide is an array of meshes that the user can teleport on. In this case I created two group planes and…

Babylon JS Day 16
|

Babylon JS Day 16

This is the last full week of the A Month of Babylon JS project. Most of the projects I want to build with Babylon JS are related to VR, so this week I’m going to learn everything I can about the WebXR features that Babylon JS has to offer. I started today with the Diving…

Babylon JS Day 15
|

Babylon JS Day 15

Today is Project Friday so I took the day to work on the scene that I’ve been building throughout Week Three. Rather than produce a demo scene like in the previous weeks, today I just made incremental progress the interactive 3D GUI cards for VR. I started by adding some images to the item cards….

Babylon JS Day 14
|

Babylon JS Day 14

Today I learned how to add VR support to my scene. Until now I’ve been using a template that Babylon JS provided in their Getting Started guide. I had to replace most of that code with an async version to be able to use the WebXR features that Babylon JS offers. I’m using the createDefaultXRExperienceAsync…

Babylon JS Day 13
|

Babylon JS Day 13

Today I thought of a workaround to the “button anchoring” issue that I mentioned yesterday. Instead of placing the button in the StackPanel with all the other controls, I moved it outside of the StackPanel, then set it’s verticalAlignment to the bottom. Now the button will always be at the bottom of the card. Then…

Babylon JS Day 12
|

Babylon JS Day 12

Today was all about setting up the layout for my 3D cards. I started by making a short list of what I wanted to display. Title: the name of the card / article / post Date Note: an excerpt from the article Image: a thumbnail pulled from the article I want to create a 3D…

Babylon JS Day 11
|

Babylon JS Day 11

I’m kicking off Week 3 of A Month of Babylon JS by diving into a week-long project to present some data as interactive cards in 3D. My Friday Project this week will involve building some VR interaction for these cards. For now, I’m going to focus on the data and the layout of the cards….