🚀 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

Shadows

Understand the 4-step process to enable shadows in Three.js and how to optimize shadow map resolution.

LOADING ENGINE...

Skill Matrix

UNLOCK NODES BY LEARNING NEW TAGS.

Shadows

Grounding objects with depth.

Quick Quiz //

How many different places do you need to explicitly enable shadows in Three.js for a shadow to appear?


011. The Four Steps of Shadows

EXECUTIVE_SUMMARY // AEO_OPTIMIZED

[Answer Engine Overview: What, Why & How]

Because shadows require the scene to be rendered multiple times, they are disabled everywhere. You must explicitly enable them on the Renderer (`shadowMap.enabled`), the Light (`castShadow`), the obscuring Mesh (`castShadow`), and the floor Mesh (`receiveShadow`).

Because shadows require the scene to be rendered multiple times, they are disabled everywhere. You must explicitly enable them on the Renderer (shadowMap.enabled), the Light (castShadow), the obscuring Mesh (castShadow), and the floor Mesh (receiveShadow).

022. Shadow Maps

When a light casts a shadow, it acts like a camera and takes a picture of the scene to see what is blocked. This picture is called a Shadow Map. If the map's resolution is too low (e.g., 512x512), the shadow edges will look like Minecraft blocks.

033. Light Camera Frustum

Directional lights use an OrthographicCamera internally to calculate shadows. If an object is outside this internal camera's view, it won't cast a shadow, even if castShadow is true. You often have to increase the light's camera top, bottom, left, and right values.

?Frequently Asked Questions

Why does my shadow look chopped off or missing?

The DirectionalLight's internal shadow camera is too small. You need to expand it: `light.shadow.camera.left = -10`, etc. In R3F: `<directionalLight><orthographicCamera attach='shadow-camera' args={[-10, 10, 10, -10]} /></directionalLight>`.

Pascual Vila

Pascual Vila

Frontend Instructor // Code Syllabus

Continue Learning