Three.js- I am having trouble with my shadow rendering, as lots of black lines are appearing everywhere instead of the shadows showing

Having recently delved into Three.js, I managed to add shadows to my model with the help of some knowledgeable individuals. However, upon the light hitting the model, numerous lines appear, causing me to question whether it's due to my poor modeling skills or if a light adjustment is needed. You can view the issue in the image below.


View the image showing the lines



Here's the code snippet:


 // JavaScript code for rendering a 3D model and adding shadows using Three.js library
// Code snippet omitted for brevity

I have attempted tweaking the light intensity and other parameters without success, leaving me stumped.


Your assistance in resolving this matter would be greatly appreciated.

Answer №1

It seems like the issue lies in the imported mapping of your geometry/maps, causing strange edges to appear. For instance, both the table top and leg show discoloration at the brightest 2/7 of their lengths. Additionally, there is a noticeable change in texture on the floor at a 45-degree angle from the rug.

  1. Consider using a more advanced material type (e.g., MeshStandard, MeshPhong...)
  2. Adjust the bias or mapSize to prevent geometry overlaps
  3. Check if the tile material needs to be repositioned, rotated, or repeated
  4. Ensure that the face material is not set to backSide or transparent

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 Removing Copyright on Charts

Check this out : https://jsfiddle.net/oscar11/4qdan7k7/5/ Is there a way to eliminate the phrase JS chart by amCharts? ...

Issue with JavaScript-generated dropdown menu malfunctioning in WebView on Android devices

During my testing of the app on a Galaxy Tab with Android 2.2, I encountered an issue within the WebView component. The problem arises when I have a local HTML page generated dynamically and it contains a SELECT element like this: <select class='d ...

Enhance Summernote functionality by creating a custom button that can access and utilize

Using summernote in my Angular project, I am looking to create a custom button that can pass a list as a parameter. I want to have something like 'testBtn': this.customButton(context, listHit) in my custom button function, but I am unsure how to ...

The situation where a Javascript switch case continues to fall through to the default case even when a 'break' statement

I am currently setting up a node.js discord bot that utilizes firebase to save a user's status. My switch statement is functioning smoothly, handling each command effectively. The default case looks like this: default: message.reply("Unknown comm ...

Customize the text color of the active tab in Material-UI Tabs

I am facing a situation where I have this specific object: const tabStyle = { default_tab:{ color: '#68C222', width: '33.3%', backgroundColor: '#FFFFFF', fontSize: 15 }, active_tab: ...

Is it possible to make changes to a box within a current PDF document using HummuJS?

I'm looking to update some existing PDF files with new data. According to the HummusJS documentation, I should be able to modify the box using parsing and modification techniques. However, I haven't been able to find the correct method to do so. ...

I need help setting up the right configuration for a custom directory of Nuxt.js components. What should

<h1>Greetings everyone</h1> Currently, I'm in the process of learning how to utilize nuxt.js and have an inquiry regarding the utilization of custom directories that differ from the standard structure of a nuxt.js application. The proble ...

ngRepeat does not completely refresh the DOM when dealing with a basic array

I have a simple array of numbers shown below using ng-repeat: n = [1,2,3,4,5,6] The problem arises when I modify this array, for example: n=[1,2,3] Instead of fully reloading the DOM, only the last 3 div elements corresponding to array 4, 5, 6 are remo ...

Save a JSON object from a URL into a JavaScript variable using jQuery

I am trying to figure out how to use the .getJSON() function to store a JSON object as a JavaScript variable. Can someone guide me through this process? var js = $.getJSON(url, function(data) {...} ); Is it necessary to include the function(data) { ...

The screen-responsive navigation bar is experiencing functionality issues

I am facing an issue with my navigation bar on both desktop and mobile. When I maximize the window while the mobile navbar is open, it disappears as expected but the desktop navbar does not appear. I am using a bootstrap template and I am unsure if solving ...

Issue with padding in Material UI button component not being applied as expected

I am struggling with applying padding and styles to my Material UI component. Take a look at the code snippet below: import "./css/Landing.css"; import { Button } from "@mui/material"; function Landing() { return ( <div class ...

What is the process for choosing a specific id from a JSON structure?

Is there a way to extract specific data from a JSON format within an Ionic project? What is the process for selecting the ID associated with particular data in a JSON format? And how can I retrieve and display the value linked to the selected product&apos ...

Implement pop-up functionality on additional buttons. Modify existing code to accommodate multiple buttons

I have a feature that allows me to click on a button and trigger a pop-up window with the desired content. The issue I am facing is how to duplicate this functionality for multiple buttons, each triggering a different pop-up content. I attempted to duplic ...

The library 'material-ui' does not have a 'withStyles' export available

Here is the content of my package.json file. Everything was working fine until recently when I started encountering this error. "@material-ui/icons": "1.0.0-beta.42", "chartist": "0.10.1", "classnames": "2.2.5", "material-ui": "1.0.0-beta.41", "npm-ru ...

Tips for sending an Object within a multipart/form-data request in Angular without the need for converting it to a string

To successfully pass the object in a "multipart/form-data" request for downstream application (Java Spring) to receive it as a List of custom class objects, I am working on handling metadata objects that contain only key and value pairs. Within the Angula ...

Tips on bringing data from a php file into a javascript variable

I'm faced with a challenge where I need to extract data from a MySQL database using a PHP file and then store that data in a JavaScript array for plotting purposes with jQuery's flot library. Has anyone encountered a similar situation and found a ...

Update the text for the filter search placeholder in the Ant Table component

Is there a way to alter the default placeholder text in the Ant Table? I've set up a functioning example in documentation but couldn't find any prop for customization besides the customized filter dropdown, which I didn't want to implement. ...

The underscore (_) parameter in HTTP GET requests

Lately, I've been seeing the '_' parameter on many websites with a seemingly random string attached to it. For example: website.com/?_=98765432 Can someone explain the significance of this parameter and how these numbers are generated? ...

Inquiries prior to projecting rays

As I delve into the world of Interaction with Three.js, several questions arise in my mind. 1) Can you shed some light on what exactly Viewport Coordinates are? 2) In what ways do they differ from client Coordinates? 3) How did we come up with this form ...

Tips for setting a default value in an input type file using JavaScript

While trying to upload a file from my local system to the server, I encountered an issue where the local path was not being set in the input type file field. As a result, I am unable to successfully upload the file. I would greatly appreciate any assistan ...