Improving the quality of shadows in Three.js

I'm looking to create realistic shadows in my scene using a DirectionalLight to simulate sunlight. However, I'm struggling with the shadow quality settings - toggling between on/off, Low, Normal, and High:

Setting parameters a and b within these ranges: a = 512 to 8192; b = 300 to 8000

    light.castShadow = checked; - no change (though reloading objects does work)

    light.shadow.mapSize.width/height = a; - this adjustment works

    light.shadow.camera.top/bottom/left/right = b; - no impact observed

I've attempted various methods to update the shadows, but none seem to be effective:

light.shadow.camera.updateProjectionMatrix(); - shadows disappear entirely
scene.updateMatrixWorld();
camera.updateProjectionMatrix();
camera.updateMatrixWorld();
camera.updateMatrix();

Is there a more efficient way to simulate sunlight in the scene? And how can I refresh the shadows?

Here's an example to illustrate my point better -> Example

javascriptthree.js

Answer №1

For more information, check out this source: https://github.com/mrdoob/three.js/wiki/Updates

Here are the properties that cannot be easily altered during runtime (after the material has been rendered at least once):

  • numbers and types of uniforms
  • numbers and types of lights
  • presence or absence of: texture, fog, vertex colors, skinning, morphing, shadow map, alpha test

If you need to make changes to these properties, a new shader program will need to be built. Make sure to set the material.needsUpdate flag to true.

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

Randomly injecting strings like 'jQuery111201xxx' into a string using jQuery Ajax

After implementing a booking system that utilizes FullCalendar, I encountered an unusual issue with the 'notes' field. Occasionally, a strange string is inserted into the notes field at random points. Here's an example of what I found recent ...

javascriptphpjqueryajax

Encountered a 404 error while trying to delete using VueJS, expressJS, and axios. Request failed with

Currently, I'm in the process of learning the fundamentals of creating a MEVN stack application and facing a challenge with the axios DELETE request method. The issue arises when attempting to make a DELETE request using axios, resulting in a Request ...

javascriptvue.jsexpressaxiosvuejs3

Ensuring scroll position remains fixed post screen rotation in HTML/Javascript

Is there a foolproof method to retain the scroll position in an HTML document following a screen rotation? While this issue is specifically in a Cocoa Touch UIWebView, it seems to be prevalent across different platforms. The standard practice appears to re ...

javascripthtmluiwebview

What sets apart calling an async function from within another async function? Are there any distinctions between the two methods?

Consider a scenario where I have a generic function designed to perform an upsert operation in a realmjs database: export const doAddLocalObject = async <T>( name: string, data: T ) => { // The client must provide the id if (!data._id) thr ...

javascriptreactjstypescript

Identifying the differences between a select2 dropdown and select2 multiselect: a guide

I currently have two different controls on my page: a select2 dropdown and a jquery multi value select Select2 Dropdown <select id="drp_me" class="select2-offscreen"> <option value="1">one</option> <option value="2">two</op ...

javascriptjqueryjquery-pluginsjquery-select2multi-select

What causes the return of undefined when accessing an item from an object?

In order to extract the item "Errors" from the data object provided below: {Id: 15, Date: "22-02-2019", Time: "22:45", Sport: "Football", Country: "United Kingdom", …} Bet: "Win" Bookie: "Bet365" Competition: "Premier League" Country: "U ...

javascriptarraysobjectecmascript-6

Issue locating the bottom of the scroll bar

My attempt to detect when the scroll reaches the bottom of a div involves using this code: $('.scrollpane').scroll(function(){ if ($(this).scrollTop() + $(this).height() === $("#results").height()) { alert('scroll at bottom&a ...

javascriptjqueryscroll

What is the best way to transform a string into an array?

After receiving an object from the http response, it looks something like this: {"[3, company1]":["role_user"], "[4, company2]":["role_admin"] } The key in the object is represented as an array. Is there a method in ...

javascriptarraystypescript

Encountered an issue while attempting to send a POST request using AngularJS $

I am facing an issue with accessing the POST method from my server. Whenever I log the response, it always returns status=0. Can anyone help me out or provide some advice? Note: I have tested the method in Postman and it works fine. Below is the code snip ...

javascripthtmlangularjsjax-rs

Dealing with lag in Kendo Grid (Utilizing Kendo Grid, Angular JS, and Web API)

Query : I have integrated a Kendo Grid into my Angular JS HTML page. The data for the Kendo Grid is fetched from a remote service Web API. While paging through the Kendo Grid, it attempts to download a whopping 38 MB of content for every 10 records, taki ...

javascriptangularjsasp.net-web-apikendo-uikendo-grid

What is the process for executing mocha tests within a web browser?

Am I the only one who thinks that their documentation lacks proper instructions on running tests in the browser? Do I really need to create the HTML file they mention in the example? How can I ensure that it runs the specific test cases for my project? I ...

javascriptreactjsmocha.js

What is the best method for exporting a MapboxGL map?

I am currently utilizing mapboxGL to display maps on a website, and I am interested in exporting the map as an image with the GeoJSON data that has been plotted. I attempted to use the leaflet plugin for this purpose, but it was unable to render clusters ...

javascriptexportleafletmapbox-gl

What is the method to render certain text as bold using a json string?

I need assistance with concatenating two strings in react while ensuring that the first string is displayed in bold, while the second one remains unchanged. The first string I want to emphasize is stored in a JSON file, and the second string comes from an ...

javascriptjsonreactjsstring

Show the tabulated outcomes of entries in a MySQL database and present them using ChartJs

My goal is to show the total number of rows stored in a MySQL Database and present these numbers using ChartJs. However, I am encountering issues with displaying the values correctly when retrieving data from my PHP Script. PHP Code Snippet for Counting R ...

javascriptphpmysqljsonajax

Another inquiry regarding a city autocomplete field in a global setting

While I understand that this question may have been previously asked, I have spent several days searching without finding a satisfactory answer. Some websites, such as eventful.com, etc., have an autosuggest city field with cities from all over the world ...

phpjavascriptajax

Refresh the page when the parameter in the URL changes

I'm encountering a small issue that I can't seem to resolve. Currently, I am on the following page: http://example.com:8080/#/user/5ad142e8063ebb0537c5343e There is a link on this page that points to the URL below: http://example.com:8080/#/u ...

javascriptvue.js

Fixing the issue: "Tricky situation with JavaScript not working within Bootstrap 4's div tag while JS functions properly elsewhere"

Currently, I'm working on implementing a hide/show function for comments using JavaScript. Fortunately, I was able to find a helpful solution here (thanks to "PiggyPlex" for providing the solution on How can I hide/show a div when a button is clicked? ...

javascripthtmlcssbootstrap-4

Creating Visuals from Text with ReactJS/NextJS

Looking to transform text into an image with a shareable link in ReactJS, similar to Spotify's lyrics sharing feature. I haven't attempted any solutions so far. I've explored various libraries without success. ...

javascripthtmlcssreactjsnext.js

Converting javascript html object lowercase

Is there a way to dynamically adjust the height of specific letters in my label? Right now, I am overriding the text for the elements: let element = document.getElementById('xxx') element.textContent = 'Label' I attempted using <sup ...

javascripthtmlangular

Notify when a variable matches the value of a div

I am attempting to display an alert message when my JavaScript var is equal to the value of a div. Here is the code I'm using: function checkMyDiv() { var elementCssClass = document.getElementById("Target"); if (elementCssClass == "hello") ...

javascripthtml