Скачать или смотреть How to Effectively Cast and Receive Shadows in Three.js

Learn how to properly enable shadows for objects in Three.js, ensuring your 3D scenes have realistic lighting and depth.
---
This video is based on the question https://stackoverflow.com/q/67503470/ asked by the user 'Charles Lavalard' ( https://stackoverflow.com/u/15335954/ ) and on the answer https://stackoverflow.com/a/67504728/ provided by the user 'Mugen87' ( https://stackoverflow.com/u/5250847/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How to cast / recieve shadow in threeJs

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Introduction: Understanding Shadows in Three.js

If you're diving into the world of 3D development using Three.js, one of the essential elements you’ll want to master is shadow casting and receiving. Shadows add depth and realism to your scenes, making them more visually appealing. In this post, we'll tackle a common obstacle: effectively casting shadows from a 3D object, like a torus, onto a plane in Three.js.

The problem you may face is ensuring that your objects are correctly set up to cast shadows, and that the surfaces intended to receive those shadows are appropriately configured. Let’s walk through how to nail this down for your scene.

The Problem

You might be like a user who recently shared their struggles with enabling shadows. The basic setup included properties like castShadow for the torus and receiveShadow for the plane. However, the user noticed that despite enabling these properties, shadows were still not appearing as expected. This points to a classic yet often overlooked issue in Three.js scene configuration.

A Quick Recap of Shadows in Three.js

Before we jump into the solution, let’s clarify some of the basic terms:

castShadow: When enabled on an object, it means the object will cast a shadow onto another surface.

receiveShadow: This enables a surface (like a plane) to receive shadows from objects casting shadows.

Solution: Steps to Enable Shadows

To ensure shadows are cast and received correctly, follow these organized steps:

1. Ensure Proper Materials Are Used

One critical mistake often made is using a MeshBasicMaterial for the receiving surface (such as your plane). This type of material does not react to lighting, meaning it won't display shadows. Instead, you want to utilize a material that takes lighting into account, such as MeshStandardMaterial. Here’s the key change:

Replace this:

[[See Video to Reveal this Text or Code Snippet]]

With this:

[[See Video to Reveal this Text or Code Snippet]]

2. Configure the Renderer

Ensure your renderer is set up to enable shadows. This includes enabling shadow maps. You can set this up as follows:

[[See Video to Reveal this Text or Code Snippet]]

Hooks like alpha should also be set depending on your scene requirements.

3. Set the Shadows for Your Objects

For the torus, ensure the castShadow property is set to true, while for the plane, it should have receiveShadow set to true.

[[See Video to Reveal this Text or Code Snippet]]

4. Configure Lights for Shadow Casting

Make sure your light is set to cast shadows. Here’s how you might set up a point light in Three.js:

[[See Video to Reveal this Text or Code Snippet]]

Adjusting the shadow map size and shadow camera settings helps improve shadow quality.

5. Complete Code Overview

Here’s a complete overview combined with the changes:

[[See Video to Reveal this Text or Code Snippet]]

Conclusion

By ensuring that you are using proper materials and configuring shadows correctly both on your objects and lighting sources, you can achieve realistic shadow effects in Three.js. Don’t forget to test and tweak your settings to achieve the best visual quality for your unique scene. If you continue to experiment and play with these parameters, you'll soon become adept at harnessing the power of shadows in your Three.js projects.

Happy coding!