|

Chapter 2.1: Babylon JS Item Cards

ByJoseph
•

Building a simple card layout using Babylon GUI.

Something that I settled on in chapter 1.2 was the idea of having two versions of the card. A compact card that I can show in a grid or list, and a full-size card with all the details for an item. This post covers the full-size card.

I had a bit of a head start on this one. Last winter I worked on a series called A Month of Babylon JS where I set out to build a small project each week. The third week of that series was all about creating some simple 3D data cards. I adapted the code from that project to create the full-size item card layout. I’ll describe the process below.

const createItemCard = () => {
  const cardMat = new StandardMaterial("light2");
  cardMat.diffuseColor = new Color3.FromHexString(brand.dark3);
  cardMat.specularColor = new Color3(0.3, 0.3, 0.3);
  const card = MeshBuilder.CreateBox("detail-card", { height: 3.4, width: 2, depth: 0.2 });
  card.material = cardMat;

  const plane = MeshBuilder.CreatePlane("plane", { height: 3.4, width: 2 });
  plane.position.z = -0.11;
  plane.parent = card;

  const advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane, 2 * 512, 3.4 * 512);

  const panel = new StackPanel();
  panel.verticalAlignment = 0;
  advancedTexture.addControl(panel);

  const image = new Image("image", "https://extendedcollection.com/wp-content/uploads/2021/05/ec_logo_02.jpg");
  image.height = "1024px";
  image.width = "1024px";
  image.paddingTop = 40;
  image.paddingLeft = 40;
  image.paddingRight = 40;
  panel.addControl(image);

  const title = new TextBlock("title");
  title.text = "Title of a Library Item";
  title.color = "white";
  title.fontSize = 48;
  title.height = "120px";
  title.textHorizontalAlignment = 0;
  title.textVerticalAlignment = 0;
  title.paddingTop = 40;
  title.paddingLeft = 40;
  title.paddingRight = 40;
  panel.addControl(title);

  const description = new TextBlock("description");
  description.fontFamily = "Tahoma, sans-serif";
  description.text =
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.";
  description.textWrapping = true;
  description.color = "white";
  description.fontSize = 36;
  description.height = "440px";
  description.textHorizontalAlignment = 0;
  description.textVerticalAlignment = 0;
  description.paddingTop = 20;
  description.paddingLeft = 40;
  description.paddingRight = 40;
  panel.addControl(description);

  const button1 = Button.CreateSimpleButton("but1", "Toggle Favorite");
  button1.height = "120px";
  button1.color = "white";
  button1.background = brand.pink;
  button1.fontSize = 50;
  button1.paddingLeft = 40;
  button1.paddingRight = 40;
  button1.onPointerUpObservable.add(function () {
    console.log("button1 clicked");
  });
  button1.verticalAlignment = 1;
  panel.addControl(button1);

  // Some hardcoded transform values – will be replaced
  // card.scaling = new Vector3(0.2, 0.2, 0.2);
  // card.position = new Vector3(0, 1.4, 4);

  card.scaling = new Vector3(0.8, 0.8, 0.8);
  card.position = new Vector3(0, 1.8, 4);

  return card;
};

The item card is made up of a handful of objects in a hierarchy. At the top level is a Box. For this series, the box only serves to add some 3D depth to the cards, but in some future projects this will also be an interactive object (grab, move, resize). Hovering just off the surface of the box is a plane. This is where we draw the UI.

Babylon JS has some powerful GUI features–my favorite of which is the AdvancedDynamicTexture. With it, we can draw interactive 2D UI objects onto the surface of a mesh (the plane). Everything we draw from here will be added to this texture.

The UI objects needed for the card are: image, title, description, and a button to toggle favorites. I placed all of these in a StackPanel to group them together in a vertical stack. Each UI object has a defined height that impacts the placement of the objects below. This may not be ideal, but it was good enough for this prototype.

Full-size item card layout

Item Card Hierarchy

  • Card
    • Plane
      • AdvancedDynamicTexture
        • StackPanel
          • Image (1024px)
          • Title (120px)
          • Description (440px)
          • Button (120px)

I ran into an issue where the text on the card was getting stretched. I posted the issue on the Babylon JS Forum and quickly received an answer that I need to pass in a size value that matches the aspect ratio of the plane when creating the AdvancedDynamicTexture. 

  // The plane is 3 units high and 2 units wide
  const advancedTexture = AdvancedDynamicTexture.CreateForMesh(plane, 2 * 512, 3.4 * 512);

I’ll expand the function that creates these cards in the days to come. I’ll add some input to the function so I can pass in an item to be rendered and I’ll keep playing with the layout a bit.

Next up: building the compact card and working with collections of items from the API.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.