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.

  var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Read more...");
  button1.width = 1;
  button1.height = "100px";
  button1.color = "white";
  button1.fontSize = 50;
  button1.background = "green";
  button1.paddingBottom = 20;
  button1.paddingLeft = 40;
  button1.paddingRight = 40;
  button1.onPointerUpObservable.add(function () {
    alert("you did it!");
  });
// No need to add the button to the panel
// panel.addControl(button1);
// Instead, add it to the parent texture
  button1.verticalAlignment = 1;
  advancedTexture.addControl(button1);

Then it was time to wrap up the createCard() function. I added some parameters

• item – the JSON object containing post data
• positionObject – an object that contains the XYZ values for the position vector.

Side Note: I tried passing the position as a Babylon JS Vector but I was seeing an odd error in the console. Not wanting to spend time on it, this was my work around for now.

function createCard(item, positionObject) {
  const card = BABYLON.MeshBuilder.CreateBox("box", { height: 3, width: 2, depth: 0.2 });
  card.position = new BABYLON.Vector3(positionObject.x, positionObject.y, positionObject.z);
  const plane = BABYLON.MeshBuilder.CreatePlane("plane", { height: 3, width: 2 });
  plane.parent = card;
  plane.position.z = -0.11;

  var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateForMesh(plane);

  var panel = new BABYLON.GUI.StackPanel();
  panel.verticalAlignment = 0;

  advancedTexture.addControl(panel);

  var title = new BABYLON.GUI.TextBlock(item);
  title.text = item.title;
  title.color = "black";
  title.fontSize = 48;
  title.height = "100px";
  title.textHorizontalAlignment = 0;
  title.textVerticalAlignment = 0;
  title.paddingTop = 40;
  title.paddingLeft = 40;
  title.paddingRight = 40;
  panel.addControl(title);

  var date = new BABYLON.GUI.TextBlock();
  date.text = item.pubDate;
  date.color = "black";
  date.fontSize = 36;
  date.height = "80px";
  date.textHorizontalAlignment = 0;
  date.textVerticalAlignment = 0;
  date.paddingTop = 20;
  date.paddingLeft = 40;
  date.paddingRight = 40;
  panel.addControl(date);

  var note = new BABYLON.GUI.TextBlock();
  note.fontFamily = "Tahoma, sans-serif";
  note.text = item.contentSnippet;
  note.textWrapping = true;
  note.color = "black";
  note.fontSize = 24;
  note.height = "660px";
  note.textHorizontalAlignment = 0;
  note.textVerticalAlignment = 0;
  note.paddingTop = 20;
  note.paddingLeft = 40;
  note.paddingRight = 40;

  panel.addControl(note);

  var button1 = BABYLON.GUI.Button.CreateSimpleButton("but1", "Read more...");
  button1.width = 1;
  button1.height = "100px";
  button1.color = "white";
  button1.fontSize = 50;
  button1.background = "green";
  button1.paddingBottom = 20;
  button1.paddingLeft = 40;
  button1.paddingRight = 40;
  button1.onPointerUpObservable.add(function () {
    alert("you did it!");
  });
  button1.verticalAlignment = 1;
  advancedTexture.addControl(button1);
}

In the future I’ll make a system to place the cards around the scene. For now, I’m placing all the cards in a single row by calculating the position on the X axis while looping over the JSON items.

    let x = -2.2 * i;
    let positionObject = {
      x: x,
      y: 0,
      z: 0
    };