Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
Color Picker
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 sliders (range controls) in to dynamically adjust size and position in a scene.
Now, let’s move on to another essential GUI feature—Color Pickers! 🎨
With color picker, you can change:
By the end of this lesson, you’ll be able to dynamically change colors using in real-time! 🚀
A color picker allows you to select and modify color properties through a visual interface.
In , we use:
gui.addColor(object, "property");Parameters:
Let’s start by adding a color picker to change the cube’s color.
const gui = new GUI();const settings = { color: "#00ff00" }; // Default color: Greengui.addColor(settings, "color").onChange((value) => {
cube.material.color.set(value);
});Now, when you pick a color, the cube’s material color updates in real-time! 🎨
You can also modify the scene background color dynamically:
const sceneSettings = { background: "#030659" }; // Default dark blue
gui.addColor(sceneSettings, "background").onChange((value) => {
scene.background = new THREE.Color(value);
});✅ Now, your background color changes in real-time! 🌌
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import GUI from "lil-gui";
const scene = new THREE.Scene();
scene.background = new THREE.Color("#030659");
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 = { color: "#00ff00" };
const sceneSettings = { background: "#202020" };
gui.addColor(sceneSettings, "background").onChange((value) => {
scene.background = new THREE.Color(value);
});
gui.addColor(settings, "color").onChange((value) => {
cube.material.color.set(value);
});
function animate() {
requestAnimationFrame(animate);
controls.update();
renderer.render(scene, camera);
}
animate();Now you can adjust object colors, and scene background colors dynamically! 🌈✨
In the next lesson, we’ll explore checkbox controls in i, allowing you to toggle visibility, wireframes, and boolean settings! 🟢⚪
🚀 Challenge: Try adding a color picker for multiple objects in your scene!
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.