An object rotating in a loop with Three.js will not cast a shadow over the entire scene

Why are some cubes in my loop not casting shadows?

Despite using a directional light that should cast shadows on all cubes, the shadowing stops after around 5 columns.

let dirLight = new THREE.DirectionalLight(0xFFFFFF, 1.5);
dirLight.position.set(300, -300, 400);
dirLight.castShadow = true;
scene.add(dirLight);

dirLight.shadow.mapSize.width = 512;
dirLight.shadow.mapSize.height = 512;
dirLight.shadow.camera.near = 0.5;
dirLight.shadow.camera.far = 1000;

let cubeGeometry = new THREE.BoxGeometry(1, 3, 1);
let cubeMaterial = new THREE.MeshLambertMaterial({
    color: 0xf54242
});

function drawCubes() {
    for (let c = 0; c < 25; c++) {
        for (let r = 0; r < 10; r++) {
            for (let t = 0; t < 2; t++) {
                let cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.position.x = c * 1.3;
                cube.position.y = r * 3.02;
                cube.position.z = t * 1.01;
                cube.castShadow = true;
                cube.receiveShadow = true;
                scene.add(cube);
            }
        }
    }

}
drawCubes();

https://i.sstatic.net/ngqSw.png

Answer №1

Your shadows are being cut off because the default frustum of the directional shadow camera is too small. To fix this, try adjusting it like this:

const distance = 50;

dirLight.shadow.camera.left = -distance;
dirLight.shadow.camera.right = distance;
dirLight.shadow.camera.top = distance;
dirLight.shadow.camera.bottom = -distance;

If you're having trouble visualizing the shadow camera settings, you can utilize THREE.CameraHelper for debugging purposes. This tool is great for fine-tuning your shadows as the quality is heavily influenced by the frustum settings. Remember, tighter frustums result in crisper shadows.

scene.add( new THREE.CameraHelper( dirLight.shadow.camera ) );

three.js R109

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When trying to access document.cookie, an empty string is returned despite the presence of cookies listed in developer tools, and the httpOnly flag is set

There are times when I encounter an empty string while trying to access document.cookie on the login page, despite the following conditions being met: The cookies are visible in the Chrome and Firefox developer tools, The httpOnly flag of the cookie I&ap ...

What is the reason for encountering an error when attempting to use a let variable in a new block before reassigning it

Check out this document here where I attempt to explain a coding scenario: // declare variables const x = 1; let y = 2; var z = 3; console.log(`Global scope - x, y, z: ${x}, ${y}, ${z}`); if (true) { console.log(`A new block scope - x, y, z: ${x}, $ ...

Tips for eliminating duplicate values from an array

In my NodeJS code, I am currently comparing values in an array. The issue at hand is: I start with an empty array: var items = []; then proceed to insert some values into it: items[0] = {a:1, b:222}; items[1] = {a:1, b:333}; items[2] = {a:1, b:222}; ...

What is the method to retrieve the return value from this ajax request?

Here's a code snippet: var information = { ObtainInfo : function() { var url = 'http://www.bungie.net/api/reach/reachapijson.svc/game/info/'+storage.get('apikey'); $.ajax({ url: url, su ...

Updating an array of objects within an array using another array of objects

There are two JavaScript Arrays: let x = [ { id: 'Abc', children: [ { id: 12, name: 'john' }, { id: 13, name: 'dow' ...

When loading a page with Puppeteer using the setContent method, images may not be loaded

Currently, I am experiencing an issue with Puppeteer where it does not load resources that are specified with relative paths (such as background.png in the image src or in CSS url()). When I try to load the content of a local file using setContent(), the o ...

method for transforming a circular grid overlaying a gltf

Is there a way to create a yellow circular mesh that conforms to the geometry of a shirt and covers it completely? My current approach involves using a raycaster to keep the mesh positioned on top of the shirt, but I am struggling to make it "bend" along ...

Invoking functions within a jQuery extension

I've come up with this code to define the instance of my plugin: $.fn.someplugin = function(opts) { $(document).on('click', '.option-1', function() { alert(1); }); }; To make my plugin work, I utilize code similar to this ...

Can you provide guidance on implementing StyledComponents within the app folder of Next.js version 13?

Quoting information from the Next.js documentation: Attention: CSS-in-JS libraries that rely on runtime JavaScript are currently not compatible with Server Components. The following libraries are supported in Client Components within the app directory: s ...

Is it possible to use v-if in conjunction with a style tag to specify a different source file? Alternatively, is there a more efficient method I

I attempted the example provided below, but unfortunately, it did not function as expected. The reason behind my endeavor is that adding numerous modifiers (--tuned) to achieve the desired outcome seemed impractical. Therefore, I decided to try and link ...

React - the use of nested objects in combination with useState is causing alterations to the initial

After implementing radio buttons to filter data, I noticed that when filtering nested objects, the originalData is being mutated. Consequently, selecting All again does not revert back to the original data. Can anyone explain why both filteredData and orig ...

Changing the content of a PHP div with an Ajax callback inside another Ajax callback?

In the index.php file, there is a script that triggers an ajax call when a header element is clicked. This call sends a $selection variable to ajax.php, which then replaces #div1 with the received HTML data. <script> $(document).ready(function(){ ...

The table refuses to load

I've been troubleshooting this issue for the past two days. The array is visible in the console, but it refuses to show up on the table. I've tried multiple approaches, but none seem to work. I suspect that "tobodyHtml" is not defined properly, a ...

Having difficulty placing a marker using google-maps-react

import {Map, GoogleApiWrapper} from 'google-maps-react' var React = require('react') class GoogleMapContainer extends React.Component { render() { return( <Map google={this.props.google} sty ...

A guide on handling and presenting an array of objects using AngularJS

I am currently working on a project where I have a large array of objects that need to be filtered, processed, and then displayed to the user. The application is built using node-webkit and I am using AngularJS and jQuery for routing, DOM manipulation, and ...

The duplication of printed keys and values from a JavaScript object is causing issues

I am working with a JSON object structured like this: var data = { "2020-01-20": ["08:00 - 09:00", "09:00 - 10:00"], "2020-01-21": ["08:00 - 09:00"] }; My objective is to display each value along with its corresponding key in a list format, as follow ...

Is there a way to retrieve the line number of an error within a dynamically inserted <script> element?

When I dynamically create a script element and add it to the page, the errors do not give me the line numbers of the script itself, but instead provide the line number where I append the script. The following code in a .js file will result in an error mes ...

Using jQuery to toggle visibility based on data equivalence

I created a code snippet in which I am implementing jQuery show/hide functionality when the data attribute matches. Here is the HTML structure: <div class="container"> <div class="item" data-item="1">1 <div class="inside" data-c ...

Determine the quantity of characters available in a contenteditable field

I have implemented a directive that allows me to input editable content inside a tag Recently, I made modifications to include a character counter feature. However, I noticed that when I add line breaks, the character count increases erroneously. https: ...

Transforming the mui stepper connection into a progress bar is simple. Each step contains individualized content to guide you through the process

Is there a way to make the MUI stepper connector act as a progress indicator? I have step content and connectors as separate divs, but I'm having trouble styling them. Any assistance would be greatly appreciated! ...