Chapter 2.0: Babylon JS Setup
A bit of setup and housekeeping for the Chapter 2 project.
There are many options when it comes to setting up a Vue project with Babylon JS. There is even a Vue plugin that turns Babylon JS into an ECS. I’m going to keep things simple. Rather than try to fit all of Babylon JS into Vue, I’m going to keep scene code in plain JS and only create links between Vue and Babylon when I have data that needs to be passed in or out of the scene.
The Babylon JS documentation site recently added a series of articles on using it with Vue. I followed the Vue 3 steps outlined in the first article.
I created a component called SceneController. This is where I’ll handle the bulk of the connections between the Vue app and the scene. For now, it just defines the canvas and calls the createScene() function on when the component is mounted.
<template>
<canvas ref="bjsCanvas" style="height: calc(50vw); width: calc(90vw)" />
</template>
<script>
import { ref, onMounted } from "@vue/runtime-core";
import createScene from "@/scenes/MainScene.js";
export default {
name: "BabylonScene",
setup() {
const bjsCanvas = ref(null);
onMounted(async() => {
if (bjsCanvas.value) {
await createScene(bjsCanvas.value);
}
});
return {
bjsCanvas,
};
},
};
</script>
Then it was time to write the implementation for createScene(). I created a file called MainScene.js and imported the Babylon JS features that I needed.
import { Engine, Scene, ArcRotateCamera, Vector3, MeshBuilder, Mesh, StandardMaterial, Color3, HemisphericLight } from "@babylonjs/core";
import { AdvancedDynamicTexture, StackPanel, TextBlock } from "@babylonjs/gui";
import { brand } from "@/helpers/brand";
const createScene = (canvas) => {
// Create and customize the scene
const engine = new Engine(canvas);
const scene = new Scene(engine);
createSceneEnvironment(scene);
createSceneCamera(canvas);
createSceneTitle();
createLogo();
createBlocks();
// Add a ground plane to the scene. Used for WebXR teleportation
const ground = MeshBuilder.CreateGround("ground", { height: 50, width: 60, subdivisions: 4 });
const groundMat = new StandardMaterial("ground-material", scene);
groundMat.alpha = 1;
groundMat.diffuseColor = new Color3.FromHexString(brand.dark4);
groundMat.specularColor = new Color3(0.2, 0.2, 0.2);
ground.material = groundMat;
// WebXRDefaultExperience
const xrDefault = scene.createDefaultXRExperienceAsync({
floorMeshes: [ground]
});
const xrHelper = xrDefault.baseExperience;
console.info("webxr:", xrHelper);
engine.runRenderLoop(() => {
scene.render();
});
};
...
export default createScene;
Most of the code was moved into helper functions that are called by createScene(). There isn’t a lot going on here yet. I focused mostly on getting the environment setup and working. Background color, scene lights, a plane to use for teleportation, a placeholder for the logo and title, and some boxes.
Here is a preview of the scene as it stands now, recorded on an Oculus Quest 2.
If you want to check out the code for this chapter, you can find it here. Next up, I’ll start working on the Item Cards using Babylon JS GUI.