Lab 009 - Title Card & Vue 3 Composables

[vrhermit]

Playing with Vue 3 composables and Babylon JS. I think this could be a valuable way to create modular, reusable, and reactive objects.

New composable called Title Card (in a folder called “composables”. Title Card exports a function which creates the title card and returns two reactive refs as an object. Internal watch functions will update the Babylon JS GUI anytime the ref values change.

const createTitleCard = (scene) => {

  // The data that we will display in the VR console
  let title = ref("TITLE PLACEHOLDER");
  let subtitle = ref("SUBTITLE PLACEHOLDER");

 
  // Babylon JS GUI code here, removed for brevity 


  // Watch the title and subtitle for changes
  // and update the text in the GUI
  watch(title, (newValue) => {
    const texture = scene.getTextureByName("title-card-texture");
    texture.getControlByName("title-text").text = newValue;
  });

  watch(subtitle, (newValue) => {
    const texture = scene.getTextureByName("title-card-texture");
    texture.getControlByName("subtitle-text").text = newValue;
  });

  return { title, subtitle };
};

export default createTitleCard;

The scene uses this function and destructures the result.

  const { title, subtitle } = createTitleCard(scene);
  ...
  title.value = "Lab 009";
  subtitle.value = "Title Card & Vue 3 Composables";