Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
DirectionalLight
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.
Welcome back ! In this lesson, we’ll explore the .
Okay, is good, but it is not enough to make the scene beautiful. Sometimes, we need a direct light to the object to make the object more appealing. There are many lights in ThreeJS that can light up the scene. But among the all light sources of ThreeJS, is the best to light up the scene. Okay, so What is a ? and How can we use it to enhance the scene? Three.js Docs
Ok, you will see how easy it is to scene the light up with , Let’s go into our code.
Let’s create a 3D object first Shall we test that “Do you remember how to create a geometry from our previous lessons?” I do encourage you should create a by yourself.
Cool, let’s explore the
const directionalLight = new THREE.DirectionalLight("#caf0f8", 5); // Color, intensity
scene.add(directionalLight); // Don't forget to add the light to the scene !!!There are two parameters in the
Okay, let’s set the light position with
directionalLight.position.set(2, 1, 4); // Set positionTo be more efficient, let’s use the library - lil-gui from our previous lesson
Let’s import the lil-gui library, and instantiate it
Now you can see that when you move the range value, the light is also moving There is a better way if you want to see a more specific direction that shows where the light comes from.
In , there are Helper Objects to assist with visualizing. At the end of the day, it can save many lives with these Helper Objects. Here, for the , there is a DirectionalLightHelper . This consists of the plane and a line representing the light's position and direction. You’ll see how helpful it is. Let’s add the DirectionalLightHelper to our scene.
const helper = new THREE.DirectionalLightHelper(directionalLight, 5);
scene.add(helper);That’s it !!! See, how easy it is. The Helper is like a rectangle with pivot stick
Now we can see where the light is coming from and where the light goes. What’s more amazing? We can also move the Helper with .
// Animation loop
function animate() {
requestAnimationFrame(animate);
// update the light helper
helper.update(); // <= here's the one
// change with lil-gu
directionalLight.position.x = config.posX;
directionalLight.position.y = config.posY;
directionalLight.position.z = config.posZ;
controls.update(); // Update the controls
// Render the scene
renderer.render(scene, camera);
}
// Start the animation loop
animate();Just update the helper in the loop, and it’s done, Now you can simultaneously move not only the Light’s position but also the helper’s position.
See, There is no guessing, just visualization with and helper .
Let’s add the for the light
const config = {
rotationX: 0,
rotationY: 0,
rotationZ: 0,
};
const rotationfolder = gui.addFolder("Rotation");
rotationfolder.add(config, "rotationX", -Math.PI, Math.PI, 0.01);
rotationfolder.add(config, "rotationY", -Math.PI, Math.PI, 0.01);
rotationfolder.add(config, "rotationZ", -Math.PI, Math.PI, 0.01);And updates it
// Animation loop
function animate() {
requestAnimationFrame(animate);
// update the light helper
helper.update();
// change with lil-gui
directionalLight.rotation.x = config.rotationX;
directionalLight.rotation.y = config.rotationY;
directionalLight.rotation.z = config.rotationZ;
controls.update(); // Update the controls
// Render the scene
renderer.render(scene, camera);
}
// Start the animation loop
animate();Perfect !!!
Now let’s tweak the range in the browser.
What do you see?
Although the helper is moving, the real light source is not moving, why?
Am I doing wrong?
Things are not updating pretty well?
Is ThreeJS complicated?
Why?
Relax, this is not your fault, it is just there is no rotation value in the Light in ThreeJs.
Now let’s go to the next step.
Sometimes, you want to target only one object in a whole scene. In this kind of case, how will you solve it? Moving around the Range value of the Light’s Position ??? You are not wrong either, but ThreeJS has a more efficient way for this kind of case. We will see it later.
Let’s instantiate the object
const target = new THREE.Object3D(); // Create an empty target object
target.position.set(0, 0, 0); // Place the target at the scene origin
directionalLight.target = target; // Set the target for the light
scene.add(target);Let’s add a button in our
const config = {
targetSphere2: function () {
console.log(directionalLight.target);
directionalLight.target = sphere2; // if we click the button, the light will automatically shift the direction of the light to sphere 2
//This means that its direction is calculated as pointing from the light's position to the target's position (as opposed to a 'Free Direct Light' that just has a rotation component).
},
};
gui.add(config, "targetSphere2");Now, we don’t have to find the right value by changing the range value of the Light’s Position. It saves more time & useful for highlighting the 3D object in the scene.
directionalLight.position.x = Math.sin(Date.now() * 0.001) * 10;
directionalLight.position.z = Math.cos(Date.now() * 0.001) * 10;Now we’ve created a rotating light source effect to the 3D objects I understand that this is hard and not familiar with these Math functions But in Three.js, familar with will give you more possibilities
So even though this is hard, let’s learn together step by step and create more engaging 3D experience
The is a versatile tool in Three.js for creating realistic lighting effects. By adjusting its , , and you can dramatically change the mood and depth of your scene.
You’ve now added a to your Three.js scene, giving your 3D objects a sense of depth and realism. This is just the beginning—lights are one of the most powerful tools in 3D rendering, and mastering them will take your scenes to the next level.
Keep tinkering, and soon you’ll be crafting stunning, lifelike scenes with ease. Happy coding! 🌟
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.