What could be the reason for the absence of shadows?

In my Three.js scene, I have various objects, a ground plane, and directional lights, one of which casts shadows. Most objects cast shadows without issues, except for a few that are part of a complex hierarchy. These specific objects, including a guy in a yellow shirt and an orange robot, are not casting shadows properly. The hierarchy they are in is much deeper compared to the ones that behave as expected. The intricate structure mirrors that of a simulation program I am working on.

Here's a glimpse of the problem:

And here it is with only the shadow-casting light enabled:

Both characters with the faulty shadows have multiple layers of nesting, unlike the stationary objects that work fine with a simpler hierarchy. Despite being within the light's shadow frustum, these problematic objects do not cast shadows correctly. I have followed the standard troubleshooting steps for shadows, but to no avail:

  • The directional light has .castShadow set to true
  • Only one directional light casts shadows
  • The settings of the directional light's shadow frustum are correct (as seen in the screenshot)
  • All Mesh objects have .castShadow and .receiveShadow set to true
  • The ground plane has .receiveShadow set to true
  • There are no gaps in the ground plane
  • EDIT: Even when all lights except the shadow-casting one are disabled, the issue persists

Could the deep hierarchy be interfering with the .castShadow settings? This seems like the most plausible explanation at this point.

EDIT: Here is the depth buffer data from the directional light, showing no signs of our guy or robot:

Just to note, I am using Three.js r70.

javascriptthree.js

Answer №1

With a hierarchy spanning 20 levels, it becomes necessary to navigate through your Meshes in order to properly assign the .castShadow and .receiveShadow properties at each level.

object.traverse( function( child )
{
    if( child instanceof THREE.Object3D )
    {
        child.castShadow = true;
        child.receiveShadow = true;
    }
} );

Answer №2

I've finally cracked the code!

After a thorough investigation in the complex hierarchy, I discovered that I had mistakenly been assigning the .visible attribute of one of the placeholder Object3D objects to undefined. This anomaly raises questions about how WebGLRenderer and ShadowMapPlugin manage visibility differently since these objects appeared in the regular render but not in the light's shadow camera renderer. Could this be classified as a potential bug?

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

Encounter issues with v-for functionality when using Internet Explorer 11

I am facing an issue with the rendering of a table in a simple Vue instance. The document displays correctly on Firefox and Chrome, however, I encounter an error in IE11: [Vue warn]: Error when rendering root instance. I assumed that Vue is compatible ...

javascriptvue.jsinternet-explorer-11

What is the best way to handle mixed parameter types in Spring MVC when sending data from AngularJS?

I am struggling to pass a json object and a string as parameters to my Java controller. Despite my efforts, I keep receiving url = "" in the controller. What could be causing this issue? Is there a solution to successfully passing these parameters? $ ...

javascriptjavaangularjsspring

Unacceptable response from AJAX function

My goal is to extract specific information from this ajax function, such as the thumbnail image and the owner of the image. It seems like the function is not recognizing data.images[i].imgurl and data.images[i].username. AJAX call in ajax.php require_o ...

javascriptphpjqueryajaxpagination

The select2 does not show the selected information

My select2 is not selecting the value when in edit mode. You can view my data here. Upon clicking the edit data button, it should select "settings" as the parent's value, but unfortunately, it's not working. You can see the issue here. Modal Sc ...

javascriptphpajaxlaraveljquery-select2

Error encountered in SelectInput.js file of React MUI 4: line 340 - TypeError: Unable to access properties of undefined (specifically 'value')

An issue arises when an empty array is provided as the options. The error message: SelectInput.js:340 Uncaught TypeError: Cannot read properties of undefined (reading 'value') at SelectInput.js:340:1 at Array.map (<anonymous>) ...

javascriptreactjs

Obtaining the value of an input field in HTML

I am currently working on a text input field that triggers a JavaScript function when a numeric value is entered. <input type="text" value="key" ng-keypress="submit(key)" ng-model="pager.page"/> Controller $scope.submit = function (val) { ...

javascripthtml

The NestJS error code 413 indicates that the payload size is too large for

I am currently utilizing nestjs and have encountered an issue where an endpoint only accepts files via multipart. When attempting to upload files that are less than 10MB, everything works perfectly fine. However, when trying to upload files larger than 10M ...

javascriptnode.jsexpressnestjsmulter

Accessing the chosen value of an ng-model

Currently, I'm attempting to refine some search results by utilizing the chosen value from an ng-select element (stripping away unnecessary formatting and details). Here's what I have so far: <select ng-model="medium" ng-options="medium as me ...

javascriptangularjsclosures

Identifying Whether Angular ng-repeat is Displaying Output or Not

I am trying to display a "No result" message when the search field does not have any matches. The current filter is working fine, but it does not show the message when there are no results. How can I achieve this? <div class="portfolio-list-wrap" ng-co ...

javascriptangularjs

The StateProvider is giving back an iteration that is undefined

AppContext.js import React, { createContext, useContext, useReducer } from "react"; // Initialize the appContext export const AppContext = createContext(); // Wrap the app and set up the App Context export const AppProvider = ({ reducer, initia ...

javascriptreactjsreact-hooksreact-reduxreact-router

Can someone explain why my Laravel route is consistently showing a 404 error?

Currently, I am attempting to perform an AJAX request for a form post type. However, the PHP parse script I am trying to send the data to is returning a 404 error as observed through Chrome developer tools. Below is the code snippet: <script type="text ...

javascriptphpajaxlaravelrequest

Rearrange content using media queries

Is it possible to rearrange the position of two HTML elements when accessing a website from a tablet? Here is the current setup: <section id="content"></section><!-- End section#content --> <aside id="sidebar"></aside><!- ...

javascriptcss

Angular appends "string:" in front of value when using ng-options

In my HTML, I have a ng-options list set up with a select element like this: <select required="required" ng-model="vm.selectedOption" ng-options="item.name as item.label for item in vm.options"> <option value="">Select an opti ...

javascriptangularjsng-options

Strangely odd actions observed in object resizing operations

My current challenge involves working with an object loaded via ObjectLoader. I am attempting to clone this object, change its material, and adjust its scale to serve as a selection indicator when the original object is selected through raycasting. Below, ...

three.js

Utilize Javascript to trigger AJAX refreshes only when necessary

I have developed a web application that displays data fetched from an AJAX request to a PHP script on the same server. This particular application involves playing music from Spotify, and in order to ensure the displayed information is always up-to-date ...

javascriptphpajaxspotifylive

Using the axios response to assign data object in VueJS

When making an API call, I am receiving an expected error. While I am able to log the error message in the console, I am encountering issues trying to set a vuejs data variable with the response. Can anyone point out what I might be doing incorrectly? ...

javascriptvue.jsvuejs2axios

Iterate through the entire array without including a specific item

I am struggling with looping through an array of items and applying some code to each item while excluding one specific item (the clicked-on item). I have experimented with using splice, but that method ends up removing the array item completely, whereas I ...

javascriptarraysfor-loop

The $digest method is refreshing the main $rootScope parent

I'm having trouble grasping the concept of how $digest functions. I came across a response on Angular $scope.$digest vs $scope.$apply that explains it as follows: " $digest() will update the current scope and any child scopes. $apply() will update ev ...

javascriptangularjs

Stop closing the bootstrap modal popup when the space key is pressed

Is there a way to prevent the model popup from closing when the space or enter key is pressed on the keyboard? I have already tried using data-backdrop="static" data-keyboard="false" but it still closes. Additionally, I have ensured that the form tag is no ...

javascripthtmljquerybootstrap-4

What is the best way to engage with a JavaScript/ClojureScript wrapper library for an API?

While I usually work with Python, I have recently been delving into learning Clojure/ClojureScript. To test my skills, I've set out to create a ClojureScript wrapper for Reddit's API. My main challenge lies in the asynchronous nature of Javascri ...

javascriptajaxclojurescript