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.
brianzinn / react-babylonjs / stories / babylonjs / 4-advanced / nonDeclarative.stories.js View on Github 
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()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// 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'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_LEFTtextHorizontalAlignment={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>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]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
})textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
textVerticalAlignment={Control.VERTICAL_ALIGNMENT_TOP}
paddingLeft='10px' paddingTop='10px'
/>
{
this.state.allowedMeshes.map(allowedMesh => (
))
}
<button height="60px" width="290px" background="#6c757d" name="cancel-button">
</button>
}textHorizontalAlignment={Control.HORIZONTAL_ALIGNMENT_LEFT}
textVerticalAlignment={Control.VERTICAL_ALIGNMENT_TOP}
paddingLeft='20px'
/>
))
}
<button height="60px" width="290px" background="#6c757d" name="cancel-button">
</button>
}
)
}
}
{this.state.model &&
}@babylonjs/gui
Babylon.js GUI module =====================
Package Health Score
89 / 100Popular @babylonjs/gui functions
- @babylonjs/gui.AdvancedDynamicTexture.CreateFullscreenUI
- @babylonjs/gui.Control.HORIZONTAL_ALIGNMENT_CENTER
- @babylonjs/gui.Control.HORIZONTAL_ALIGNMENT_LEFT
- @babylonjs/gui.Control.HORIZONTAL_ALIGNMENT_RIGHT
- @babylonjs/gui.Control.VERTICAL_ALIGNMENT_CENTER
- @babylonjs/gui.Control.VERTICAL_ALIGNMENT_TOP
- @babylonjs/gui.Slider
- @babylonjs/gui.StackPanel
- @babylonjs/gui.TextBlock