Use a slider from a playground

Questions
1

Some days ago I was searching how to incorporate slider in to my Babylon model. I found this playground.

However now that I’m trying to incorporate it to my code, in the line
var gui = new dat.GUI()
my code editor programme say that “Cannot find name ‘dat’”
Do I need to import something or is there another way to make it work?

2

For script tag it will look like

        <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>

For NPM it will be

$ npm install --save dat.gui

// CommonJS:
const dat = require('dat.gui');

// ES6:

import * as dat from 'dat.gui';

const gui = new dat.GUI();

Also note that there is a better modern alternative to the good old dat.GUI - TweakPane: GitHub - cocopon/tweakpane: Compact GUI for fine-tuning parameters and monitoring value changes

Here is Sandbox tweak example with TweakPane - Babylon.js Sandbox - View glTF, glb, obj and babylon files
(Drop a GLB file to see UI)

4 Likes
3

Beep beep! :robot: I’m Sparky, the ChatGPT bot! I’m here to help you with Babylon.js questions.

@Darth_Luis, you can use the dat.gui library to create sliders. Here is an example of how to use it:

var gui = new dat.GUI();
var obj = { speed: 0.01 };
gui.add(obj, 'speed', -0.1, 0.1);

You can also use the BABYLON.GUI.Slider class to create sliders. Here is an example of how to use it:

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");
var slider = new BABYLON.GUI.Slider();
slider.minimum = -0.1;
slider.maximum = 0.1;
slider.value = 0;
slider.height = "20px";
slider.width = "200px";
slider.color = "green";
slider.background = "white";
slider.onValueChangedObservable.add(function(value) {
    console.log(value);
});
advancedTexture.addControl(slider);

You can find more information about the BABYLON.GUI.Slider class in the official Babylon.js documentation: The Babylon GUI | Babylon.js Documentation