Unusual shadow effects with three.js

I'm still new to three.js and webgl, and I'm encountering some odd-looking shadows when using a directional light.

Could somebody help me out?

Below is the code I have for the renderer:

this.renderer.shadowMapEnabled = true;
this.renderer.shadowMapSoft = true;
this.renderer.shadowCameraNear = 3;
this.renderer.shadowCameraFar = this.camera.far;
this.renderer.shadowCameraFov = 75;
this.renderer.shadowMapBias = 0.0039;
this.renderer.shadowMapDarkness = 0.5;
this.renderer.shadowMapWidth = 1024;
this.renderer.shadowMapHeight = 1024;

Does anyone have any suggestions on how to fix this issue?

javascriptthree.jsshadow

Answer №1

The issue lies in the fact that the light source you are using is too large for the object casting the shadow. To better understand this problem, you can make the shadow camera visible by adding the following line of code:

light.shadowCameraVisible = true

Once you've done that, you can experiment with adjusting the size of the light source by changing the value of the parameter d in the code snippet below:

light.shadowCameraLeft = -d
light.shadowCameraRight = d
light.shadowCameraTop = d
light.shadowCameraBottom = -d

Answer №2

The reason for the appearance of the shadows in three.js when using DirectionLight is due to the way it is implemented in the code. Essentially, DirectionLight in three.js creates a shadow map using an orthogonal camera. This means that the scene is viewed from the angle of the directional light, creating a shadow map based on that perspective. Because the projection matrix of the light is different from that of the main camera, the shadows may appear pixelated and distorted in some cases.

Unfortunately, it is not possible to create a truly orthogonal shadow in three.js using the standard lights. Achieving perfect coverage of the shadow map from the camera's viewpoint is also a challenge.

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

Error: React/Express - The renderToString() function encountered an unexpected token '<'

As I work on implementing server-side rendering for my React/Express application, I have hit a snag due to a syntax error related to the use of the react-dom/server renderToString() method. In my approach, I am following a tutorial mentioned here - The sn ...

javascriptreactjsexpressreact-router

Solving compatibility problems with jquery AJAX requests on multiple browsers

searchCompanyExecutives: function(criteria, callback) { var params = $j.extend({ type: "GET", data: criteria, url: "/wa/rs/company_executives?random=" + Math.floor(Math.random() * (new Date()).getTime() + 1), ...

javascriptjqueryajax

Can someone explain the process of utilizing forEach to add elements to an array using React's useState hook?

I'm attempting to replicate the functionality of the code snippet below in a React environment. Despite several attempts, I have not been able to achieve the same outcome. Old code that worked (non-React) const array = [] res = await getData() res. ...

javascriptreactjsarrays

What is the most effective way to save numerical information to a file?

Imagine a scenario where there is an array filled with one million random numbers: [ 0.17309080497872764, 0.7861753816498267, ...] The task at hand is to store these numbers onto a disk for future retrieval. While storing them in text formats like JSON or ...

javascriptnode.jsfile

Utilizing variables in Angular service to make API calls

Currently, I am working on accessing the Google Books API. Initially, I was able to directly access it in my controller but now I want to follow best practices by moving the business logic into a directive. HTML <form ng-submit="search(data)"> < ...

javascriptangularjsapi

How can I adjust the transparency in a JavaScript popup modal window for an ASP.Net GridView?

Recently, I added an 'onclick' event to every row of an asp gridview and the popup window that appears is functioning perfectly. Now, I'm interested in adding a transparency level to the body of the popup window for a translucent effect. Can ...

javascriptc#cssasp.netgridview

How can I retrieve the value of a radio button using jQuery

My goal is to retrieve the selected/checked radio button value using the .get function. I believe my code is correct, but the sequence seems to be off. $.get('burgerorder_check.php', function(data) { inputVal = $('input[type ...

javascriptphpjquery

Tracking a user's path while redirecting them through various pages

Recently, I created a website with a login page and a home page using nodejs, javascript, and html. The client side sends the entered username and password to the server, which then replies based on the validation result. During navigation between pages, h ...

javascripthtmlnode.js

Resizing the background while scrolling on a mobile web browser

My website background looks great on desktop, but on mobile (using Chrome) the background starts to resize when I scroll, mainly due to the browser search bar hiding and reappearing upon scroll. Is there a way to prevent my background from resizing? Check ...

javascripthtmlcss

"Function.click operates successfully when no arguments are given, but encounters issues when arguments are supplied

I had a function that was functioning correctly: $('#buttFurniture').click(onFilterCLick); However, when I decided to pass arguments to the function, it stopped working: $('#buttFurniture').click(onFilterCLick(arrOutput, arrFurniture ...

javascriptjqueryhtmlarrays

Tips for accessing the reference of a child when it is a functional component

Trying to implement a Higher Order Component (HOC) to access the ref of any component. It works perfectly fine when regular JSX is passed, but encounters issues when a functional component is passed: class GetRef extends React.Component { state = {}; ...

javascriptreactjsreact-hooksuse-ref

Is there a way to recover a deleted element from an array?

I have a list of user cards, and my task is: Clicking the "undo" button: will restore the last card that was deleted (using an array) Question 1: How can I create an array from the displayed cards list? Question 2: How do I restore the last deleted card? ...

javascriptjqueryarraysajax

Exploring the world of if/elseif/else in JavaScript with ANTLR

I have been struggling with a particular problem and despite my efforts, I haven't been able to find a solution. Any guidance in the right direction would be greatly appreciated. My current challenge involves parsing a JavaScript file using ANTLR in ...

javascriptantlr4abstract-syntax-tree

Unable to change the text with Jquery functionality

I currently have an iframe code that contains the word [UID]. My goal is to replace this word with a different word of my choosing. <iframe class="ofrss" src="https://wall.superrewards.com/super/offers?h=asacgrgerger&uid=[UID]" frameborder="0" widt ...

javascriptjqueryhtml

Only a fragment of the .attr() method

I am trying to work with an image HTML block <img src="folder1/folder2/folder3/logo1.png"> situated inside a large div similar to this structure <div id="editorial"> <div id="img_editorial"><img src="folder1/folder2/folder3/logo1. ...

javascriptjquery

Having issues with my toggler functionality. I attempted to place the JavaScript CDN both at the top and bottom of the code, but unfortunately, it is still not

I recently attempted to place the JavaScript CDN at the top of my code, but unfortunately, it did not have the desired effect. My intention was to make the navigation bar on my website responsive and I utilized a toggler in the process. While the navbar di ...

javascripthtmlcssbootstrap-5

Can a for loop iterate through a conditional statement using the length property?

Glad you're here to check this out. See the code below. let questions = []; let Question = function(question, answers, number) { this.question = question; this.answers = answers; this.number = number; } let question1 = new Question(&ap ...

javascriptarraysobjectfor-loopiteration

Is it possible for the UUIDs generated by the uuid package to be identical?

I am in need of creating unique UIDs for objects that will be stored in a database. To achieve this, I am utilizing the UUID npm package for generating unique identifiers. I have concerns regarding the possibility of duplicate IDs being generated by this p ...

javascriptnode.jsexpressnpm

Is there a way to store div content in a PHP Session?

Just starting to learn php & ajax, so be patient with me. I have a clickable map. When the user clicks on a point, the value is displayed in a div. Once they select a point, they should be able to proceed to the next step. Now I want to save the content ...

javascriptphpjqueryajax

What is the purpose of deserializing the user for every request using PassportJS?

While I have scoured the official documentation and various online resources, I am still unable to find a solution to what seems like an obvious question. When working with Passport.js, it is necessary to define two methods - one for serializing and one f ...

javascriptnode.jsexpresspassport.js