THREEJS Debug UI
“Streamline Your Development Process with Debug UI: A Comprehensive Guide”
1. Title
2. Description
3. Snippet
4. Explanation
5. Full code
6. Output
7. Summary
8. Next and Previous Blog
2. Description
In this blog, we will explore the powerful tool of Debug UI and how it can enhance your web development workflow. Learn how to effectively debug and monitor your applications, inspect variables, and optimize performance using Debug UI features and best practices. Get ready to level up your development skills and create more efficient, bug-free projects.
3. Snippet and 4. Explanation
import * as dat from 'lil-gui'
/**
* Debug
*/
const gui = new dat.GUI()In the given code, we are importing the `dat` object from the ‘lil-gui’ library, which serves as a replacement for Dat.GUI, offering similar functionality for creating a graphical user interface to control variables and debug applications.
Next, we create a new instance of the `GUI` class from the ‘lil-gui’ library using `const gui = new dat.GUI()`. This `gui` object is the entry point to create and manage the Debug UI. It allows us to add folders, sliders, color pickers, and other interactive controls to manipulate various parameters in our application.
Once the GUI is set up, we can add controllers for variables and observe how changes to these variables affect the behavior of our application in real-time. This interactive debugging process facilitates development, optimization, and testing, making it easier to identify and fix issues efficiently.
There are different types of elements you can add to that panel:
Absolutely! In the Debug UI panel created using ‘lil-gui’, you can add various types of elements to control and manipulate different parameters in your application. Some common types of elements that you can add are:
1. **Folders**: Folders allow you to organize related controls together. They act as containers for grouping controls under specific categories, making the UI more organized and user-friendly.
2. **Sliders**: Sliders (also known as Number controllers) allow you to set numerical values by dragging a slider handle or typing in a value. They are commonly used to control properties like position, size, or intensity.
3. **Color Pickers**: Color pickers enable you to choose colors visually. They are used to control the color properties of objects, backgrounds, or lighting in the scene.
4. **Boolean Controllers**: Boolean controllers represent on/off switches or checkboxes. They are used to toggle certain features or settings in your application.
5. **Buttons**: Buttons allow you to trigger specific actions when clicked. They can be used to perform actions like resetting values or executing certain functions.
6. **Options Controllers**: Options controllers (also known as Select controllers) provide a dropdown menu with predefined options. They are useful for selecting from a list of choices.
7. **Text Controllers**: Text controllers allow you to input text values. They are used to control properties that require text input, such as labels or titles.
These elements provide a range of functionalities to interactively adjust parameters and observe the impact on your application in real-time. They make the debugging and development process more intuitive and efficient by providing a user-friendly interface for controlling variables and settings.
gui
.add(torus.position, 'y')
.min(- 3)
.max(3)
.step(0.01)
.name('elevation')In this code snippet, we are using the ‘lil-gui’ library to create a GUI panel (`gui`). The `add()` method is used to add a controller to the panel. In this case, we are adding a controller for the `y` property of the `torus.position` object.
Here’s a breakdown of the method chain:
1. `add(torus.position, ‘y’)`: This creates a controller for the `y` property of the `torus.position` object. It means that the `y` value of the torus’s position can now be controlled via the GUI.
2. `.min(-3)`: This sets the minimum value of the controller to -3. The user won’t be able to set the `y` value below this minimum value.
3. `.max(3)`: This sets the maximum value of the controller to 3. The user won’t be able to set the `y` value above this maximum value.
4. `.step(0.01)`: This sets the step size for incrementing or decrementing the `y` value. In this case, the value will change by 0.01 units with each interaction.
5. `.name(‘elevation’)`: This sets the name or label of the controller to ‘elevation’. It will be displayed as ‘elevation’ in the GUI panel.
With this controller added to the GUI, the user can interactively adjust the `y` position of the torus using the slider within the specified range (-3 to 3) and with a step size of 0.01. The label ‘elevation’ will provide a clear indication of what this control does, making the GUI more user-friendly and descriptive.
gui.add(torus, 'visible')Here, we are adding a controller for the visible property of the torus object. The visible property determines whether the torus is visible in the scene or not.
By using gui.add(torus, 'visible'), a checkbox will be added to the GUI panel. When the checkbox is checked, the torus will be visible, and when unchecked, it will become invisible. This provides an easy and interactive way to toggle the visibility of the torus object in the scene using the Debug UI.
gui.addColor(torus.material, 'color')Here, we are adding a color picker controller for the color property of the torus.material object. The color property represents the color of the material used to render the torus.
By using gui.addColor(torus.material, 'color'), a color picker will be added to the GUI panel. This allows you to interactively choose a color for the torus material using the color picker interface. You can visually select a color, and the changes will be immediately applied to the torus in the scene. This provides an intuitive and efficient way to adjust the appearance of the torus by changing its material color.
const parameters = {
write: () => {
alert('ok')
}
}
gui.add(parameters, 'write');Here, we are adding a controller to the GUI panel that triggers the write() method when interacted with. The write() method in this case will simply display an alert with the message 'ok'.
By using gui.add(parameters, 'write'), a button-like element will be added to the GUI panel. When the button is clicked, it will invoke the write() method and display the 'ok' alert. This provides an easy way to execute custom functions or actions directly from the GUI panel, facilitating quick testing and debugging during development.
5. Full code
<html lang="en">
<head>
<title>three.js - Boilerplate</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<script async src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"></script>
<style>
body {
background-color: grey
}
html,
body {
margin: 0;
height: 100%;
}
#canvas {
width: 100%;
height: 100%;
display: block;
color: rgb(40, 63, 141);
}
</style>
</head>
<body>
<canvas id="canvas"></canvas>
<script type="importmap">
{
"imports": {
"three": "../threeJS/build/three.module.js"
}
}
</script>
<script type="module">
import * as THREE from 'three';
import { OrbitControls } from '../threeJS/examples/jsm/controls/OrbitControls.js';
import * as DAT from '../threeJS/newadded/DatGUI.js';
import { Stats } from "../threeJS/newadded/Stats.js";
//---gui---//
var gui;
gui = new DAT.GUI();
var lightGui = false;
var statsGui = true;
gui.close();
// three var
var canvas, renderer, scene, camera, controls, stats;
function init() {
canvas = document.getElementById('canvas');
renderer = new THREE.WebGLRenderer({ canvas });
renderer.setSize(window.innerWidth, window.innerHeight);
stats = Stats();
statsGui && document.body.appendChild(stats.dom);
scene = new THREE.Scene();
scene.background = new THREE.Color('black');
scene.fog = new THREE.Fog(0xffffff, 0, 750);
const axesHelper = new THREE.AxesHelper(500);
scene.add(axesHelper);
const ambientLight = new THREE.AmbientLight(0xffffff, 0.7)
scene.add(ambientLight)
camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.y = 3;
camera.position.z = 6;
controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.6;
controls.screenSpacePanning = false;
controls.maxPolarAngle = Math.PI / 2.02;
controls.minDistance = 10;
controls.maxDistance = 1000;
controls.update();
const floorGeometry = new THREE.PlaneGeometry(10, 10);
const floorMaterial = new THREE.MeshStandardMaterial({
color: '#777777',
metalness: 0.2,
roughness: 0.4,
envMapIntensity: 0.5,
side: THREE.DoubleSide
});
const floor = new THREE.Mesh(floorGeometry, floorMaterial)
floor.receiveShadow = true
floor.rotation.x = - Math.PI * 0.5
floor.position.set(0, 0, 0)
scene.add(floor)
// Create a TorusGeometry
const torusGeometry = new THREE.TorusGeometry(1, 0.4, 32, 64);
// Create a material
const material = new THREE.MeshBasicMaterial({ color: 'yellow' });
// Create a mesh with the geometry and material
const torus = new THREE.Mesh(torusGeometry, material);
torus.position.set(0, 2, 0)
scene.add(torus);
// add gui
gui
.add(torus.position, 'y')
.min(- 3)
.max(3)
.step(0.01)
.name('elevation')
gui.add(torus, 'visible')
gui.addColor(torus.material, 'color')
const parameters = {
write: () => {
alert('ok')
}
}
gui.add(parameters, 'write');
window.addEventListener('resize', function () {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});
}
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera);
stats.update();
}
init()
animate();
</script>
</body>
</html>6. Output
7. Summary
The blog explores the usage of ‘lil-gui,’ a lightweight and alternative library to Dat.GUI, for creating a Debug UI in web development. It covers how to add various interactive elements like sliders, color pickers, and buttons to control parameters, visualize data, and execute custom functions. Utilizing ‘lil-gui’ simplifies the debugging process, enhances development efficiency, and provides a seamless debugging experience.
8. Previous Blog
previous blog: THREEJS Geometries
