Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Folders
Loading...
Loading...
0 Comments
"Please login to view comments"
Upgrade your account
"Please login to view comments"
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
In the previous lessons, we explored sliders (range controls), color pickers, and checkboxes in
Now, let’s move on to another essential feature—Folders! 📂✨
Using folders, we can organize multiple GUI controls into collapsible sections, making the interface cleaner and easier to navigate.
By the end of this lesson, you’ll be able to:
A folder is a collapsible section in that groups related controls together.
In , we use:
const folder = gui.addFolder("Folder Name");Let’s start with a basic example where we group size, position, and rotation controls inside separate folders.
const gui = new GUI();const settings = {
size: 1,
posX: 0,
posY: 0,
posZ: 0,
rotX: 0,
rotY: 0,
rotZ: 0,
};// Size Folder
const sizeFolder = gui.addFolder("Size Controls");
sizeFolder.add(settings, "size", 0.1, 5, 0.1).onChange((value) => {
cube.scale.set(value, value, value);
});
// Position Folder
const positionFolder = gui.addFolder("Position Controls");
positionFolder.add(settings, "posX", -5, 5, 0.1).onChange((value) => cube.position.x = value);
positionFolder.add(settings, "posY", -5, 5, 0.1).onChange((value) => cube.position.y = value);
positionFolder.add(settings, "posZ", -5, 5, 0.1).onChange((value) => cube.position.z = value);
// Rotation Folder
const rotationFolder = gui.addFolder("Rotation Controls");
rotationFolder.add(settings, "rotX", -Math.PI, Math.PI, 0.01).onChange((value) => cube.rotation.x = value);
rotationFolder.add(settings, "rotY", -Math.PI, Math.PI, 0.01).onChange((value) => cube.rotation.y = value);
rotationFolder.add(settings, "rotZ", -Math.PI, Math.PI, 0.01).onChange((value) => cube.rotation.z = value);✅ Now the GUI panel will have three sections:
Checkboxes can also be grouped into a single folder to toggle visibility and wireframe mode.
const toggleSettings = { visible: true, wireframe: false };
const toggleFolder = gui.addFolder("Toggle Controls");
toggleFolder.add(toggleSettings, "visible").onChange((value) => {
cube.visible = value;
});
toggleFolder.add(toggleSettings, "wireframe").onChange((value) => {
cube.material.wireframe = value;
});✅ Now, you can toggle object visibility and enable/disable wireframe mode from one section!
You can group color pickers inside a folder to manage multiple objects or properties.
const colorSettings = { objectColor: "#00ff00", backgroundColor: "#202020" };
const colorFolder = gui.addFolder("Color Settings");
colorFolder.addColor(colorSettings, "objectColor").onChange((value) => {
cube.material.color.set(value);
});
colorFolder.addColor(colorSettings, "backgroundColor").onChange((value) => {
scene.background = new THREE.Color(value);
});✅ Now, you can change the object color and scene background from the same section! 🎨
You can also nest folders inside other folders for better organization.
const mainFolder = gui.addFolder("Main Settings");
const transformFolder = mainFolder.addFolder("Transform");
transformFolder.add(settings, "posX", -5, 5, 0.1);
transformFolder.add(settings, "posY", -5, 5, 0.1);
transformFolder.add(settings, "posZ", -5, 5, 0.1);
const appearanceFolder = mainFolder.addFolder("Appearance");
appearanceFolder.addColor(colorSettings, "objectColor");
appearanceFolder.add(toggleSettings, "wireframe");✅ Now, the "Main Settings" folder will have two nested sections:
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import GUI from "lil-gui";
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75,
window.innerWidth / window.innerHeight,
0.1,
1000
);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
const controls = new OrbitControls(camera, renderer.domElement);
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);
const gui = new GUI();
const settings = {
size: 1,
posX: 0,
posY: 0,
posZ: 0,
rotX: 0,
rotY: 0,
rotZ: 0,
};
const colorSettings = { objectColor: "#00ff00", backgroundColor: "#202020" };
const toggleSettings = { visible: true, wireframe: false };
const mainFolder = gui.addFolder("Main Settings");
const transformFolder = mainFolder.addFolder("Transform");
transformFolder.add(settings, "posX", -5, 5, 0.1);
transformFolder.add(settings, "posY", -5, 5, 0.1);
transformFolder.add(settings, "posZ", -5, 5, 0.1);
const appearanceFolder = mainFolder.addFolder("Appearance");
appearanceFolder.addColor(colorSettings, "objectColor");
appearanceFolder.add(toggleSettings, "wireframe");
// Size Folder
const sizeFolder = gui.addFolder("Size Controls");
sizeFolder.add(settings, "size", 0.1, 5, 0.1).onChange((value) => {
cube.scale.set(value, value, value);
});
// Position Folder
const positionFolder = gui.addFolder("Position Controls");
positionFolder
.add(settings, "posX", -5, 5, 0.1)
.onChange((value) => (cube.position.x = value));
positionFolder
.add(settings, "posY", -5, 5, 0.1)
.onChange((value) => (cube.position.y = value));
positionFolder
.add(settings, "posZ", -5, 5, 0.1)
.onChange((value) => (cube.position.z = value));
// Rotation Folder
const rotationFolder = gui.addFolder("Rotation Controls");
rotationFolder
.add(settings, "rotX", -Math.PI, Math.PI, 0.01)
.onChange((value) => (cube.rotation.x = value));
rotationFolder
.add(settings, "rotY", -Math.PI, Math.PI, 0.01)
.onChange((value) => (cube.rotation.y = value));
rotationFolder
.add(settings, "rotZ", -Math.PI, Math.PI, 0.01)
.onChange((value) => (cube.rotation.z = value));
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();Next, we’ll learn how to use Dropdown (Select) controls in ! 🎛️⬇️
How did you manage to remove the blur property and reach here?
Upgrading gives you access to quizzes so you can test your knowledge, track progress, and improve your skills.