1. Advisor
  2. @babylonjs/gui
  3. @babylonjs/gui code examples
View all @babylonjs/gui analysis

How to use @babylonjs/gui - 10 common examples

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.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
    header.paddingTop = '10px'
    UiPanel.addControl(header)
    var slider = new Slider()
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 / 4-advanced / nonDeclarative.stories.js View on Github external
// Create default pipeline and enable dof with Medium blur level
  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'
github brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / nonDeclarative.stories.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
github brianzinn / react-babylonjs / stories / babylonjs / 2-withVR / with2DGUI.stories.js View on Github external
textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
                        textVerticalAlignment={Control.VERTICAL_ALIGNMENT_CENTER}
                      />
                      
                        
                      
                    
                  
                  
                    
                      
                      {
                        this.state.allowedMeshes.map(allowedMesh => (
                          
                        ))
                      }
                    
                  
                  
                    <button height="60px" width="290px" background="#6c757d" name="cancel-button"></button>
github brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / nonDeclarative.stories.js View on Github external
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
    slider.minimum = param.min
    slider.maximum = param.max
    slider.color = '#636e72'
    slider.value = pipeline.depthOfField[param.name]
    slider.height = '20px'
    slider.width = '205px'
    UiPanel.addControl(slider)
    slider.onValueChangedObservable.add(function (v) {
      pipeline.depthOfField[param.name] = v
      header.text = param.name + ':' + pipeline.depthOfField[param.name].toFixed(2)
      moveFocusDistance = false
    })
  })
  scene.activeCameras = [scene.activeCamera, bgCamera]
github brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / nonDeclarative.stories.js View on Github external
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
    slider.minimum = param.min
    slider.maximum = param.max
    slider.color = '#636e72'
    slider.value = pipeline.depthOfField[param.name]
    slider.height = '20px'
    slider.width = '205px'
    UiPanel.addControl(slider)
    slider.onValueChangedObservable.add(function (v) {
      pipeline.depthOfField[param.name] = v
      header.text = param.name + ':' + pipeline.depthOfField[param.name].toFixed(2)
      moveFocusDistance = false
    })
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='10px' paddingTop='10px'
                      /&gt;
                      {
                        this.state.allowedMeshes.map(allowedMesh =&gt; (
                          
                        ))
                      }
                    
                  
                  
                    <button height="60px" width="290px" background="#6c757d" name="cancel-button">
                      
                    </button>
                    
                      
                    
                  
                
              
            
          
          }
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'
                          /&gt;
                        ))
                      }
                    
                  
                  
                    <button height="60px" width="290px" background="#6c757d" name="cancel-button">
                      
                    </button>
                    
                      
                    
                  
                
              
            
          
          }
          
        
      
    )
  }
}
github brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / remix.stories.js View on Github external
                  
                
              
            
            {this.state.model &amp;&amp;
            
            }

@babylonjs/gui

Babylon.js GUI module =====================

GitHub
Apache-2.0
Latest version published 1 day ago

Package Health Score

92 / 100
Full package analysis

Popular @babylonjs/gui functions

Similar packages