How to use the @babylonjs/gui.Control.VERTICAL_ALIGNMENT_CENTER 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.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / nonDeclarative.stories.js View on Github external
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
    header.paddingTop = '10px'
    UiPanel.addControl(header)
    var slider = new Slider()
    slider.horizontalAlignment = Control.HORIZONTAL_ALIGNMENT_LEFT
github brianzinn / react-babylonjs / stories / babylonjs / 2-withVR / with2DGUI.stories.js View on Github external
textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
                            textVerticalAlignment={Control.VERTICAL_ALIGNMENT_TOP}
                            paddingLeft='20px'
                          />
                        ))
                      }
                    
                  
                  
                    <button height="60px" width="290px" background="#6c757d" name="cancel-button">
                      
                    </button>
                    
                      
                    
                  
                
              
            
          
          }
          
        
      
    )
  }
}