Misplaced shadow map making unexpected appearance

I am currently utilizing the shadow map plugin in three.js and have encountered some challenges along the way. Despite getting an acceptable image, I am still facing a final issue - shadows appearing on top of some surfaces with normal 0,0,1. Attached below are images showcasing this problem on the same model.

Three.js

Preview.app (Mac)

Below is the code used to configure the shadows:

    var shadowLight = new THREE.DirectionalLight(0xFFFFFF);
    shadowLight.position.x = cx + dmax/2;
    shadowLight.position.y = cy - dmax/2;
    shadowLight.position.z = dmax*1.5;
    shadowLight.lookAt(new THREE.Vector3(cx, cy, 0));
    shadowLight.target.position.set(cx, cy, 0);
    shadowLight.castShadow = true;
    shadowLight.onlyShadow = true;
    shadowLight.shadowCameraNear    =  dmax;
    shadowLight.shadowCameraFar     =  dmax*2;
    shadowLight.shadowCameraLeft    = -dmax/2;
    shadowLight.shadowCameraRight   =  dmax/2;
    shadowLight.shadowCameraBottom  = -dmax/2;
    shadowLight.shadowCameraTop     =  dmax/2;
    shadowLight.shadowBias          =  0.005;
    shadowLight.shadowDarkness      =  0.3;
    shadowLight.shadowMapWidth      =  2048;
    shadowLight.shadowMapHeight     =  2048;
    // shadowLight.shadowCameraVisible = true;
    scene.add(shadowLight);

UPDATE: You can also view a live example by clicking here.

javascriptwebglthree.js

Answer №1

Looks like your code is in good shape. Experiment with the shadowLight.shadowBias value to get it just right. It can be a tricky parameter to adjust, especially since it can be negative.

UPDATE: Adjust the near and far planes of your shadow-camera for better results. This should help minimize issues like shadow acne and peter-panning. For instance, for your current project, try setting 

shadowLight.shadowCameraNear = 3*dmax;
. That seemed to work well for me.

Make sure you have added enough depth to your table tops as well, if they don't already have it.

To potentially improve your setup, consider setting 

renderer.shadowMapCullFrontFaces = false
. This will make the renderer cull back faces instead of front ones.

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

Track and maintain the active status of the clicked article using jQuery

I'm encountering an issue with jQuery where the parent ul li does not open as expected. Below is the structure of my HTML: <div> <ul> <li class="has-sub"> <a href="#">1</a> <ul> &l ...

javascriptjqueryhtmlcss

Remove user from firebase with Admin SDK

I need help understanding how to remove a user from my admin panel using the Firebase Admin SDK. When attempting to delete a user, I encountered this error: Uncaught (in promise) ReferenceError: uid is not defined at eval (ManageCustomer. ...

javascriptfirebasevue.jsgoogle-cloud-firestoregoogle-admin-sdk

Enable contenteditable on table by pressing the tab key

I developed a table entry tool and I would like to be able to input items by pressing the tab key instead of having to manually click on each element. I haven't been able to figure out how to make this function work yet. $('table').on(&apos ...

javascriptjqueryhtml

Clicking on different elements in an array using JavaScript to toggle the visibility of a div

Here is a problem I've encountered. This code selects a random element from an array to hide/show a div by toggling it. The issue is that I want it to always open a new one while hiding the previous one with the same button click. Currently, it shows ...

javascriptarraysonclick

Using Jquery to dynamically link a textbox with the onload event: A Guide

When a user clicks a button, a textbox is dynamically created in Javascript. It appears on the screen to be filled by the user. <input type="text" id="documentTitle" name="documentTitle" value="<spring:message code="document.Title"/>" I am looki ...

javascriptjqueryhtml

The ng-change event in AngularJS is not being activated by IE 11

Hello everyone, I am currently working with the angularjs framework and implementing a datepicker functionality. Unfortunately, the input type date is not functioning correctly on Internet Explorer. As a workaround, I have utilized jquery and css to create ...

javascriptjqueryangularjsdatepicker

What is the best way to ensure that consecutive if blocks are executed in sequence?

I need to run two if blocks consecutively in TypeScript, with the second block depending on a flag set by the first block. The code below illustrates my scenario: export class Component { condition1: boolean; constructor(private confirmationServic ...

javascriptangulartypescriptprimeng

Is it possible to change the text of a scrollspy dropdown to a default text when it is not actively tracking any items?

I am new to Vue and currently implementing Bootstrap Vue Scrollspy (view example here). My sticky dropdown is tracking all referenced content and updates with the current section in view. You can check out my code sample here. Is there a way to set the d ...

javascriptvue.jsvuejs2

Adding elements in an asynchronous manner

I'm facing a challenge in generating elements based on query results and placing them inside the correct p containers. The problem is that all the elements are ending up in the last container instead of their respective positions. app.Controller.prot ...

javascriptjqueryjquery-mobile

What is the default method for automatically disabling drop down fields?

I've created a script that will gray out a drop-down field if a prior selection wasn't made. Once the appropriate choice is selected, the grayed-out field will become active. My query is, how can I set the drop-down field to be initially grayed ...

javascriptjqueryhtmldrop-down-menu

Transform data into proper JSON structure in a React JS application

I am facing an issue with the object structure below: { Inputs : { key : value, key: valu }}, My goal is to convert it into a JSON format using JSON.stringify(Inputs). However, the resulting format is incorrect as shown below, causing my ...

javascriptjsonreactjsobject

Creating a PNG file from a Uint8Array containing RGBA data

I am currently attempting to save a screenshot of a specific area in ThreeJS to a file. Initial attempts involved displaying the image in a new tab using: window.open(renderer.domElement.toDataURL("image/png")); The renderer object used has preserveDrawi ...

javascriptthree.jswebgl

The parameters for Vue.js @change events are consistently returning as 0 whenever a file is uploaded by clicking on the picture

Check out my JSFiddle here:: https://jsfiddle.net/includephone/o9gpb1q8 I've encountered an issue involving the @change event on an input field. My goal is to create a carousel of images with 4 images per slide. Data Object Structure data: functio ...

javascriptvue.jsdomvuejs2

What steps do I need to take to enable VS2010's Process Debug Manager specifically for JavaScript?

I have a unique server application (not a website, not HTML- or browser-based) that offers extensibility through JavaScript scripts. I am supposed to be able to debug these scripts with Visual Studio's debugger using the Process Debug Manager. Even t ...

javascriptvisual-studiovisual-studio-2010debuggingcom

Ways to remove the address bar from a mobile browser like Chrome or an Android browser

Is there a way to make videojs go full screen on Android devices when the URL is entered, without displaying the address bar? ...

javascriptandroidhtmlhtml5-video

Why does AngularJS $watch only execute once?

Why do the codes in the watch only run once? How can I address this issue? this.$rootScope.$watch('tabType', () => { if (this.$rootScope["tabType"] === TabType.Sent) { this.$scope.refreshSentList(); } else if (this.$rootScope[ ...

javascriptangularjs

Javascript/Webpack/React: encountering issues with refs in a particular library

I've encountered a peculiar issue that I've narrowed down to the simplest possible scenario. To provide concrete evidence, I have put together a reproducible repository which you can access here: https://github.com/bmeg/webpack-react-test Here&a ...

javascriptreactjswebpack

Lighting issue occurs with Aframe when attempting to load a lightmap after loading a GLTF model,

After importing mesh objects from a GLTF file, I am attempting to apply a lightmap to them. All of my objects have a 2UV channel. Currently, I am waiting for 'object3dset' and here is the code snippet I'm using: const mesh = this.el.g ...

three.jsaframelightgltf

Embed the json data within the modal box

I received a JSON response from a php function, and it looks like this: [{"id":"15","activity_type":"call","activity_title":"Call to check "}] Below is the script that triggers the request (actvitiy.js) (Edited) $(document).on("click", ".view_contact_ac ...

javascriptjqueryjsontwitter-bootstrap

Customize GUI - adjusting menu dimensions and placement (javascript / css)

I’ve been experimenting with integrating Dat GUI into my Three.js project for adding some controls. The interface of Dat GUI really appeals to me, but I’m facing challenges in terms of positioning the menu on the page. Specifically, I’m looking to ce ...

javascriptcssthree.js