Crisp edges and corners casting shadows in Threejs BoxGeometry

I created a structure using BoxGeometry, with a DirectionalLight rotating around it. However, I am facing an issue with aliased light bleed in the corners. I've attempted adjusting the shadow.mapSize, the blur radius, and the renderer.shadowMap.type, but none of these solutions have remedied the problem so far.

https://i.sstatic.net/3lFO2.png

const gui = new lil.GUI();

// Code examples and setup for the scene, camera, renderer, controls, lights, and mesh objects

// ANIMATE function for the animation

// GUI controls and configurations for shadow mapping and physically correct lights

// CSS styling for the webpage layout

// Required scripts and links for Three.js and OrbitControls

You can view a demo with an imported open box cube at the following link, where the artifacting issue still persists:

javascriptthree.js

Answer №1

To optimize the performance of your material, consider setting the shadowSide parameter to THREE.FrontSide instead of the default BackSide. Additionally, adjusting the shadow bias to a negative value like 

directionalLight.shadow.bias = -0.01
can help mitigate issues like shadow acne.

The shadow bias is utilized to address problems related to shadow acne, as discussed here.

const gui = new lil.GUI();

// Include your scene setup and object creation code here...

// ANIMATE section for the object animation


*
{
    margin: 0;
    padding: 0;
}

html,
body
{
    overflow: hidden;
}

.webgl
{
    position: fixed;
    top: 0;
    left: 0;
    outline: none;
}
<!-- Include necessary Three.js and OrbitControls libraries here -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Open Box</title>
</head>
<body>
    <canvas class="webgl"></canvas>
</body>
</html>

Answer №2

By adjusting the size of the shadow map and the shadow radius after loading, it appears to resolve the issue.

window.addEventListener('load', function () {
  directionalLight.shadow.map.dispose(); // critical
  directionalLight.shadow.mapSize = new THREE.Vector2(2000,2300)
  directionalLight.shadow.radius = 5;
  directionalLight.shadow.updateMatrices(directionalLight);
})

See Example Here

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

Tips for displaying or concealing data in table cells in Google Charts

Using a Google charts table to display server exceptions, but the errors are too long for cells. How can I show only an excerpt of error messages in each cell with a + expansion sign for full details in a modal box on click? I have successfully implement ...

javascriptjqueryhtmlgoogle-visualization

Break down React website into distinct modules and bundle them as npm dependencies within a single package

Currently, I am developing a React website that includes distinct sections such as contact management and message management. Each of these sections is quite extensive. To navigate to these sections, we use a single dashboard for control. Since separate ...

javascriptreactjsnpmwebpackbabeljs

When does JSON overload become a problem?

Creating a bookmarking site similar to delicious has been my latest project. To ensure an optimized user experience, I have decided to fetch all the bookmarks from the database table and organize them into a JSON object containing essential data such as id ...

javascriptjson

The ability to rate the product in Livewire:Laravel is exclusively reserved for buyers

I have integrated the Livewire rating system into my Laravel e-commerce platform. Currently, all users can rate and comment on any product. However, I want to restrict this privilege to only buyers. ProductRatings.php class ProductRatings extends Componen ...

javascriptphpcsslaravellaravel-livewire

Customizing date formats on HighCharts

Below is the code snippet I am currently working with: <script> $.getJSON('https://www.quandl.com/api/v3/datasets/OPEC/ORB.json?order=asc', function(json) { var hiJson = json.dataset.data.map(function(d) { return [new Date(d[0] ...

javascriptphphighcharts

Modify the names of the array variables

I am currently working with JSON data that consists of an array of blog categories, all represented by category id numbers. I am uncertain about how to create a new array that will translate these id numbers into their corresponding category names. Essen ...

javascriptreactjs

Issue in TypeScript: Property '0' is not found in the type

I have the following interface set up: export interface Details { Name: [{ First: string; Last: string; }]; } Within my code, I am using an observable configuration variable: Configuration: KnockoutObservable<Details> = ko.observable& ...

javascripttypescriptknockout.jsobservable

Error Message: Nodemon Node Error - Module 'C:Program FilesGit ode_modules odemonin odemon.js' Not Found

Currently diving into the world of NodeJS. Running a Windows 7 64 Bit setup. Node.js and NPM are up and running smoothly. Nodemon is also installed locally and globally. When trying to execute the command: "nodemon server.js" or simply "nodemon" An er ...

javascriptnode.jsnpmnodemon

The error message "writeUserData is not defined" is indicating that there is an undefined variable in the react code

I'm still learning React and I've been working on a new function: This is my code in summary: class Signup extends Component { constructor(props) { super(props); } componentDidMount() { } writeUserData = (userId, username, email) => ...

javascriptreactjs

Guide on running a MySQL query in an asynchronous function in a Node.js application

Encountering some challenges while using MySQL in a node/express JS application. It seems that when trying to access the MySQL database within an asynchronous function, the code will 'skip over' the SQL query and run synchronously. This is the co ...

javascriptmysqlexpressasynchronous

What methods do you suggest for storing the app's state in the browser to reduce the number of requests to the backend?

Recently at work, I encountered an issue with our application that is generating unnecessary requests and causing performance issues. Our technology stack consists of Typescript, React, and Redux (not Redux-Toolkit). I am seeking the following outcomes: ...

javascriptreactjscachingreduxbrowser-cache

Redirecting to another page with a simple link is not recommended

Once the user successfully logs in, I redirect them to the dashboard. Everything was working fine until I deployed it using tomcat. Now the URL is http://localhost:8080/myWar/ So when I use this: window.location.href = "/dashboard"; it redirects to ht ...

javascriptjquery

Disabling a button does not automatically shift the focus to the next element in the tab order

Is there a way to limit the number of times a button can be clicked using jQuery? For example, I want a button that can only be clicked three times before disabling itself automatically. test.html <div class="main"> <input class="one" type="t ...

javascriptjqueryhtml

Upon adding data to mongodb, an error message is displayed stating "Cannot read property '_id' of undefined."

Backend Server-Side Code The following is my server-side code. Below it, you can find the client-side code along with the error that is being displayed. I am having trouble identifying what the issue might be. app.post("/service", async (res, re ...

javascriptnode.jsmongodbserver

Implement necessary validation for the country code selection on the dropdown menu using the intl-tel-input jQuery plugin

Check out the intl-tel-input plugin here Currently, I am utilizing this plugin and attempting to implement required validation on the country code drop-down. However, the plugin seems to be restricting me from achieving this. I have made several attempts ...

javascriptjquerypluginsintl-tel-input

The oninput event in IE10 is consistently triggered upon redirection

I have encountered a strange issue with IE10 when redirecting the page on an 'oninput' event, which does not occur with Chrome. I have simplified the code to demonstrate the problem: <html> <head> <script type="text/javascript&g ...

javascripthttp-redirectdom-eventsinternet-explorer-10

Enhancing Real-time Communication with NodeJS and NowJs Servers

Recently, I stumbled upon NodeJS and NowJS and I'm fascinated by the technology. My goal is to develop a Facebook-style instant commenting application where users can post comments that will instantly appear on the feed. After watching the screencast ...

javascriptnode.jsembedded-jettynowjs-sockets

Transferring a PHP array to JavaScript using AJAX

I have spent time searching for answers to my issue with no success. My PHP file includes the following array: $data = ['logged' => $_SESSION['loggedin'], 'sessName' => $_SESSION['name']]; echo json_encode($dat ...

javascriptphpajax

Is it possible to retrieve the pixel color of a mesh by clicking on it in JavaScript?

On the current page, we have a mesh loaded with TreeJS and displayed in a canvas: https://i.sstatic.net/j8Ztj.png Is there a way to retrieve the color of the point where a click occurs? I attempted a method suggested in this thread: Getting the color val ...

javascripthtmlcanvasthree.js

utilizing various ajax functions

I'm having trouble using additional functions with the "complete:" option in JQuery ajax after the "selectOptionSort" function. Can anyone help me figure out what's wrong? $('#tipos').change(function(){ $("#marcas ...

javascriptjqueryajax