How to use the babylonjs-gui.StackPanel function in babylonjs-gui

To help you get started, we’ve selected a few babylonjs-gui examples, based on popular ways it is used in public projects.

github brianzinn / react-babylonjs / src / Button3D.ts View on Github external
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"
      }
github brianzinn / react-babylonjs / src / StackPanel.ts View on Github external
create(scene: Scene): BabylonStackPanel {
    this.stackPanel = new BabylonStackPanel(this.props.name)

    if (this.props.isVertical !== undefined) {
      this.stackPanel.isVertical = this.props.isVertical
    }

    return this.stackPanel
  }
github brianzinn / create-react-app-babylonjs / src / nonDeclarative.js View on Github external
var pipeline = new DefaultRenderingPipeline("default", true, scene, [scene.activeCamera]);
  pipeline.depthOfFieldBlurLevel = DepthOfFieldEffectBlurLevel.Medium;
  pipeline.depthOfFieldEnabled = true;
  pipeline.depthOfField.focalLength = 180;
  pipeline.depthOfField.fStop = 3;
  pipeline.depthOfField.focusDistance = 2250;
  var moveFocusDistance = true;

  //add UI to adjust pipeline.depthOfField.fStop, kernelSize, focusDistance, focalLength
  var bgCamera = new ArcRotateCamera("BGCamera", Math.PI / 2 + Math.PI / 7, Math.PI / 2, 100,
      new Vector3(0, 20, 0),
      scene);
  bgCamera.layerMask = 0x10000000;
  var advancedTexture = AdvancedDynamicTexture.CreateFullscreenUI("UI");
  advancedTexture.layer.layerMask = 0x10000000;
  var UiPanel = new StackPanel();
  UiPanel.width = "220px";
  UiPanel.fontSize = "14px";
  UiPanel.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_RIGHT;
  UiPanel.verticalAlignment = Control.VERTICAL_ALIGNMENT_CENTER;
  advancedTexture.addControl(UiPanel);
  var params = [
      {name: "fStop", min:1.4,max:32},
      {name: "focusDistance", min:0,max:5000},
      {name: "focalLength", min:0,max:500}
  ]
  params.forEach(function(param){
      var header = new TextBlock();
      header.text = param.name+":"+pipeline.depthOfField[param.name].toFixed(2);
      header.height = "40px";
      header.color = "black";
      header.textHorizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT;