Canvatorium Lab 047

Open a modal card from the main window. The modal is contained in a window group with the main window.

This lab builds on Lab 046 by adding a modal window when the user clicks on the short description. The new window is populated with a longer description and appears in front of the main window. The main window is dimmed and moved back in z-space. The new window is added to the window group, so it can be moved along with the other objects.

The plane mesh for each window is added to the lab scope by returning it from a function. In the scope of the lab, I can position and anchor each mesh as needed. All reactivity is handled at this level too, only passing reactive data into the window functions as needed. With this pattern, I was able to set up a single vue watch function that handles the state transition between the main window and the modal.

    watch(showModal, (newValue) => {
      if (newValue) {
        // Move the main window back in z-space and fade it out
        Animation.CreateAndStartAnimation("move-main", contentMesh, "position.z", 60, 6, contentMesh.position.z, 0.4, 0);
        Animation.CreateAndStartAnimation("fade-main", contentMesh, "visibility", 60, 6, 1, 0.5, 0);

        // Move the modal window forward in z-space and fade it in
        Animation.CreateAndStartAnimation("open-modal", modalMesh, "position.z", 60, 6, modalMesh.position.z, 0, 0);
        Animation.CreateAndStartAnimation("open-modal", modalMesh, "visibility", 60, 6, 0, 1, 0);
        modalMesh.isPickable = true;
      } else {
        // Move the main window forward in z-space and fade it in
        Animation.CreateAndStartAnimation("open-modal", contentMesh, "position.z", 60, 6, 0.4, 0, 0);
        Animation.CreateAndStartAnimation("open-modal", contentMesh, "visibility", 60, 6, 0.5, 1, 0);

        // Move the modal window back in z-space and fade it out
        Animation.CreateAndStartAnimation("open-modal", modalMesh, "position.z", 60, 6, modalMesh.position.z, 1, 0);
        Animation.CreateAndStartAnimation("open-modal", modalMesh, "visibility", 60, 6, 1, 0, 0);
        modalMesh.isPickable = false;
      }
    });

Special thanks to carolhmj for helping me solve an issue related to pointer events.

Video Demo: