Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Range (Slider)
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 why is a powerful GUI library for . Now, we’ll dive into one of the most commonly used controls in —the Range (Slider).
Sliders are essential for dynamically adjusting values like:
By the end of this lesson, you’ll know how to add sliders to your GUI panel and make real-time changes to your 3D objects.
A slider allows you to adjust a numeric value between a minimum and maximum range.
In , you can create a slider using:
gui.add(object, "property", min, max, step);Parameters:
Let’s start by adding a slider to control the size of a cube in a Three.js scene.
const gui = new GUI();const settings = { size: 1 };gui.add(settings, "size", 0.1, 5, 0.1).onChange((value) => {
cube.scale.set(value, value, value);
});Now, when you adjust the slider, the cube’s scale will update dynamically! 🎯
To control the position of an object, we need separate sliders for X, Y, and Z axes.
const settings = { posX: 0, posY: 0, posZ: 0 };
gui.add(settings, "posX", -5, 5, 0.1).onChange((value) => {
cube.position.x = value;
});
gui.add(settings, "posY", -5, 5, 0.1).onChange((value) => {
cube.position.y = value;
});
gui.add(settings, "posZ", -5, 5, 0.1).onChange((value) => {
cube.position.z = value;
});Now you can move the cube freely along all three axes using sliders! 🎛️
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 };
// Size Slider
gui.add(settings, "size", 0.1, 5, 0.1).onChange((value) => {
cube.scale.set(value, value, value);
});
// Position Sliders
gui.add(settings, "posX", -5, 5, 0.1).onChange((value) => {
cube.position.x = value;
});
gui.add(settings, "posY", -5, 5, 0.1).onChange((value) => {
cube.position.y = value;
});
gui.add(settings, "posZ", -5, 5, 0.1).onChange((value) => {
cube.position.z = value;
});
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();Now you have sliders to control both size and position, and the UI is well-organized. 🎉
In the next lesson, we’ll explore color pickers in to dynamically change object materials and backgrounds! 🎨
🚀 Challenge: Try adding sliders for rotation (X, Y, Z) and see how it affects the cube!
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.