How to use babylonjs-gui - 10 common examples

create(scene: Scene): BabylonButton3D {
    this.button3D = new BabylonButton3D(this.props.name)

    // console.log("created button", this.props.name)

    let text: TextBlock | undefined = undefined
    let image: BabylonImage | undefined = undefined

    if (this.props.imageUrl) {
      image = new BabylonImage(`${this.props.name}-image`, this.props.imageUrl)
    }

    if (this.props.text) {
      text = new TextBlock()

      text.text = this.props.text
      if (this.props.fontColor) {
        text.color = this.props.fontColor.toHexString()
      } else {
        text.color = "white" // default in BabylonJS
      }

      if (this.props.fontSize) {
        text.fontSize = this.props.fontSize
      } else {
        text.fontSize = 24 // default in BabylonJS
      }
    }

    if (text && image) {

create(scene: Scene): BabylonButton3D {
    this.button3D = new BabylonButton3D(this.props.name)

    // console.log("created button", this.props.name)

    let text: TextBlock | undefined = undefined
    let image: BabylonImage | undefined = undefined

    if (this.props.imageUrl) {
      image = new BabylonImage(`${this.props.name}-image`, this.props.imageUrl)
    }

    if (this.props.text) {
      text = new TextBlock()

      text.text = this.props.text
      if (this.props.fontColor) {
        text.color = this.props.fontColor.toHexString()

create(scene: Scene): BabylonCylinderPanel {
    this.cylinderPanel = new BabylonCylinderPanel()

    if (this.props.margin) {
      // console.log("setting cylinder panel margin")
      this.cylinderPanel.margin = this.props.margin
    }

    if (this.props.orientation) {
      this.cylinderPanel.orientation = this.props.orientation
    }

    if (this.props.radius) {
      this.cylinderPanel.radius = this.props.radius
    }

    return this.cylinderPanel
  }

create(scene: Scene): BabylonButton3D {
    this.button3D = new BabylonButton3D(this.props.name)

    // console.log("created button", this.props.name)

    let text: TextBlock | undefined = undefined
    let image: BabylonImage | undefined = undefined

    if (this.props.imageUrl) {
      image = new BabylonImage(`${this.props.name}-image`, this.props.imageUrl)
    }

    if (this.props.text) {
      text = new TextBlock()

      text.text = this.props.text
      if (this.props.fontColor) {
        text.color = this.props.fontColor.toHexString()
      } else {
        text.color = "white" // default in BabylonJS
      }

      if (this.props.fontSize) {
        text.fontSize = this.props.fontSize
      } else {
        text.fontSize = 24 // default in BabylonJS

create(scene: Scene): TextBlock {
    // allow newline char, but should force users to use text={'line1.\nline2.'} to override.
    let text = this.props.text.replace(/(\\n)+/g, "\n")
    this.textBlock = new TextBlock(this.props.name, text)

    // this belongs in control props handler
    if (this.props.color) {
      this.textBlock.color = this.props.color
    }

    // TODO: move all of these to props handler
    if (this.props.fontSize) {
      this.textBlock.fontSize = this.props.fontSize
    }

    if (this.props.fontStyle) {
      this.textBlock.fontStyle = this.props.fontStyle
    }

    if (this.props.fontFamily) {

// PBR GUI
        const label = new Rectangle(str);
        label.background = 'black'
        label.height = height;
        label.alpha = 0.5;
        label.width = width;
        label.cornerRadius = 20;
        label.thickness = 1;
        label.linkOffsetY = 30;
        label.top = '0%';
        label.zIndex = 5;
        label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        label.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        gui.addControl(label);

        const text = new TextBlock();
        text.text = str;
        text.color = 'white';
        label.addControl(text);
    
        if (!lines) {
            label.linkWithMesh(mesh);
            return label;
        }

        var line = new Line();
        line.alpha = 0.5;
        line.lineWidth = 5;
        line.dash = [5, 10];
        gui.addControl(line);
        line.linkWithMesh(mesh);
        line.connectedControl = label;

public static CreateLabel (gui: AdvancedDynamicTexture, mesh: Mesh, str: string, lines: boolean, width: string, height: string): Rectangle {
        // PBR GUI
        const label = new Rectangle(str);
        label.background = 'black'
        label.height = height;
        label.alpha = 0.5;
        label.width = width;
        label.cornerRadius = 20;
        label.thickness = 1;
        label.linkOffsetY = 30;
        label.top = '0%';
        label.zIndex = 5;
        label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        label.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        gui.addControl(label);

        const text = new TextBlock();
        text.text = str;
        text.color = 'white';
        label.addControl(text);
    
        if (!lines) {
            label.linkWithMesh(mesh);
            return label;
        }

        var line = new Line();
        line.alpha = 0.5;
        line.lineWidth = 5;

camera.attachControl(canvas, true);

    var grassMaterial = new BABYLON.StandardMaterial("grass", scene);
    var grassTexture = new GrassProceduralTexture("textgrass", 256, scene);
    grassMaterial.ambientTexture = grassTexture;
    grassMaterial.diffuseTexture= grassTexture;

    // Create Ground
    var ground = BABYLON.Mesh.CreatePlane("ground", 25.0, scene);
    ground.position = new BABYLON.Vector3(0, -5, 0);
    ground.rotation = new BABYLON.Vector3(Math.PI / 2, 0, 0);

    ground.material = grassMaterial;
 
    // Create the 3D UI manager
    var manager = new GUI.GUI3DManager(scene);
    // Create a horizontal stack panel
    var panel = new GUI.StackPanel3D();
    panel.margin = 0.02;
    manager.addControl(panel);
    startGameButton(panel);
    addLabelToScene();
    // Enable VR
    var helper = scene.createDefaultVRExperience({createDeviceOrientationCamera: false});
	helper.enableInteractions();

    return scene;
}

text.text = this.props.text
      if (this.props.fontColor) {
        text.color = this.props.fontColor.toHexString()
      } else {
        text.color = "white" // default in BabylonJS
      }

      if (this.props.fontSize) {
        text.fontSize = this.props.fontSize
      } else {
        text.fontSize = 24 // default in BabylonJS
      }
    }

    if (text && image) {
      let stackPanel = new StackPanel()
      stackPanel.background = "#CCCCCC"
      stackPanel.isVertical = true
      stackPanel.height = "256px" // should be = 512 / contentScaleRatio

      image.paddingTop = "10px"

      if (this.props.imageWidth) {
        image.width = this.props.imageWidth
      } else {
        image.width = "180px"
      }
      if (this.props.imageHeight) {
        image.height = this.props.imageHeight
      } else {
        image.height = "180px"
      }

public static CreateLabel (gui: AdvancedDynamicTexture, mesh: Mesh, str: string, lines: boolean, width: string, height: string): Rectangle {
        // PBR GUI
        const label = new Rectangle(str);
        label.background = 'black'
        label.height = height;
        label.alpha = 0.5;
        label.width = width;
        label.cornerRadius = 20;
        label.thickness = 1;
        label.linkOffsetY = 30;
        label.top = '0%';
        label.zIndex = 5;
        label.verticalAlignment = Control.VERTICAL_ALIGNMENT_TOP;
        label.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
        gui.addControl(label);

        const text = new TextBlock();
        text.text = str;
        text.color = 'white';
        label.addControl(text);
    
        if (!lines) {
            label.linkWithMesh(mesh);
            return label;
        }

        var line = new Line();
        line.alpha = 0.5;
        line.lineWidth = 5;
        line.dash = [5, 10];