Join the Conversation!
Subscribing gives you access to the comments so you can share your ideas, ask questions, and connect with others.
PointLight
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 to your Mastery Course! So far, you’ve learned about and . But what if you want to create something more dynamic, like a glowing lightbulb or a flickering candle? Imagine you’re in a cozy room, holding a candle. The warm glow spreads out in all directions, illuminating the space around you.
That’s exactly what a does in ! is like a tiny sun or a lightbulb—it emits light in all directions from a single point, creating beautiful highlights and shadows. Let’s dive in and light up your 3D world!
and lights are great, but they don’t always capture the realism we need for specific scenarios. Imagine a lamp, a torch, or a light bulb—these objects emit light that spreads outward from a single point in all directions. That’s where comes in.
In Three.js, a is a light source that emits light in all directions from a single point in 3D space. Think of it as a tiny star or a glowing orb. It’s perfect for creating realistic lighting effects, such as lamps, candles, or even the glow of a firefly.
Imagine you’re sitting in a dark room with a single light bulb hanging from the ceiling. The light spreads out in all directions, casting shadows and illuminating objects nearby. The farther you move from the bulb, the dimmer the light becomes. This is exactly how a works in . Official Docs
.png)
Before we add the , let’s set up a basic scene.
Here’s a simple setup:
Now, let’s add our to the scene. We’ll place it in the center of the room, just like a light bulb hanging from the ceiling.
const pointLight = new THREE.PointLight("#8338ec", 1, 5); // Color, intensity, distance
scene.add(pointLight);We'll see that in the later part of this lesson about .
Like other lights, we can move around using the
pointLight.position.set(5, 2, 3); // Set positionAs usual, let’s use the for the better control.
const config = {
lightColor: "#8338ec",
intensity: 1,
distance: 0,
power: 1700,
posX: 5, // Add a number property
posY: 2, // Add a number property
posZ: 3, // Add a number property
// we will add rotation properties bec we want to show that lights are not effected by rotation
rotationX: 0,
rotationY: 0,
rotationZ: 0,
};
const pointLightFolder = gui.addFolder("Point Light 1");
pointLightFolder.addColor(config, "lightColor");
pointLightFolder.add(config, "intensity", 0, 100, 0.1);
pointLightFolder.add(config, "distance", 0, 10, 0.1);
pointLightFolder.add(config, "power", 0, 2000, 1);
const folder = gui.addFolder("Position");
folder.add(config, "posX", -10, 10, 0.01);
folder.add(config, "posY", -10, 10, 0.01);
folder.add(config, "posZ", -10, 10, 0.01);
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);We’ll link the controls to our .
// Animation loop
function animate() {
requestAnimationFrame(animate);
// change with lil-gui
pointLight.color.set(config.lightColor);
pointLight.intensity = config.intensity;
pointLight.distance = config.distance;
pointLight.position.x = config.posX;
pointLight.position.y = config.posY;
pointLight.position.z = config.posZ;
pointLight.rotation.x = config.rotationX;
pointLight.rotation.y = config.rotationY;
pointLight.rotation.z = config.rotationZ;
controls.update(); // Update the controls
// Render the scene
renderer.render(scene, camera);
}
// Start the animation loop
animate();Okay, also has a helper as well as a .
Official DocsLet’s add a
const pointLightHelper = new THREE.PointLightHelper(pointLight);
scene.add(pointLightHelper);Don’t forget to update helpers in the animate loop to work properly
function animate() {
requestAnimationFrame(animate);
// Update the helpers
pointLightHelper.update();
pointLightHelper2.update();
// change with lil-gui
...
// pointLight.power = config.power;
...
controls.update(); // Update the controls
// Render the scene
renderer.render(scene, camera);
}
// Start the animation loop
animate();There is another property which is called power.
So what is property ?
Of course, it is the light’s power.
pointLight.power = 1000;Let’s update the
// Animation loop
function animate() {
requestAnimationFrame(animate);
// Update the helpers
...
// change with lil-gui
...
pointLight.power = config.power; <= Here's the code
...
controls.update(); // Update the controls
// Render the scene
renderer.render(scene, camera);
}
// Start the animation loop
animate();See, now, you can also increase the light’s intensity with power also. This is just for knowledge, in reality, we always use intensity to adjust the light’s dimness and brightness.
Congratulations! You’ve just created a scene with a in . Remember, the is just one of many light sources in Three.js. Now, go ahead and experiment! Change the light’s , , and . Add more objects to the scene. The possibilities are endless, and the only limit is your imagination. 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.
