Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Checkbox Controls
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 lesson, we explored how to use color pickers in to dynamically change object materials, lights, and background colors.
Now, let’s move on to another essential control—Checkboxes! ✅❌
Checkbox controls are used for boolean values (true or false) and are great for:
By the end of this lesson, you’ll know how to add checkboxes to your GUI panel and use them to toggle object properties dynamically! 🚀
A checkbox allows users to toggle a boolean (true/false) property.
In , we use:
gui.add(object, "property");Parameters:
Let’s start with a checkbox to toggle object visibility.
const gui = new GUI();const settings = { visible: true };gui.add(settings, "visible").onChange((value) => {
cube.visible = value;
});Now, checking/unchecking the box will show or hide the cube in real-time! 🎭
You can also toggle wireframe mode for debugging:
const settings = { wireframe: false };
gui.add(settings, "wireframe").onChange((value) => {
cube.material.wireframe = value;
});const result = arrayBuffer.map(x => x * 2);✅ Now, you can toggle object visibility, enable wireframes dynamically! 🎛️✨
In the next lesson, we’ll explore Folders in , allowing you to organize multiple GUI controls into collapsible sections, making the interface cleaner and easier to navigate.
🚀 Challenge: Try adding a checkbox to toggle animations on/off!
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.