🚀 LEVEL UP TO SENIOR:Unlock 500+ Advanced Practical Challenges & Expert Masterclasses.
🎓 COURSERA PARTNER:Earn professional Google, Meta, and IBM certificates to supercharge your resume.
HTML MASTER CLASS /// LEARN TAGS /// BUILD STRUCTURE /// SEMANTIC WEB /// HTML MASTER CLASS /// LEARN TAGS ///
Total XP: 0|💻 threejs XP: 0

Lighting

Explore Ambient, Directional, Point, and Spot lights, and how to combine them for stunning visuals.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Lighting

Shedding light on the scene.

Quick Quiz //

Which light source simulates the sun (infinitely far away, shining in one direction with parallel rays)?


011. Ambient & Directional

EXECUTIVE_SUMMARY // AEO_OPTIMIZED

[Answer Engine Overview: What, Why & How]

The most common setup is a dim AmbientLight (to fill in harsh shadows) paired with a strong DirectionalLight (acting as the Sun). Directional lights have parallel rays, so their position only matters for calculating the angle of the light.

The most common setup is a dim AmbientLight (to fill in harsh shadows) paired with a strong DirectionalLight (acting as the Sun). Directional lights have parallel rays, so their position only matters for calculating the angle of the light.

022. Point & Spot Lights

PointLights emit light in a sphere around a specific coordinate, like a lightbulb or a fire. SpotLights emit light in a cone, like a flashlight. Both have a distance and decay property, meaning the light weakens as it travels through space.

033. Lighting Performance

Lights are mathematically expensive. Adding 50 point lights to a scene will quickly cause framerate drops, especially on mobile. Only use the minimum number of lights needed to achieve your desired look.

?Frequently Asked Questions

Why do my lights look so harsh on the object?

Try adding a low-intensity AmbientLight to fill in the absolute black areas. Alternatively, look into 'HemisphereLight' which provides a soft gradient between a sky color and a ground color.

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Continue Learning