The shadow of unusual stripes in ThreeJS

In my attempt to brighten up the kitchen area, I encountered an issue with strange horizontal shadows on the kitchen features. If you take a look at , you'll see what I mean.

I suspect that the spotlight positioned in the middle of the x and y axes, and at the top of the z axis, might be causing this problem. When I tried moving the light source just one unit along the y-axis (in a room measuring 500x300), the shadow stripes appeared on the entire floor: . The same issue persisted when I moved the light source by 1 or even 50 points.

It's worth noting that all elements within the space both cast and receive shadows.

javascriptthree.jsshadow

Answer №1

The issue typically stems from the proximity of the shadow near point to your object. To gain a better understanding, consider following these steps: once you have created your light, include a camera helper to display the boundaries of the light.

var spotLight = new THREE.SpotLight(0xffffff, 0.3, 0, Math.PI / 2);
spotLight.position.set(0, 100, 0);
sunLight.castShadow = true;

var shadowCameraHelper = new THREE.CameraHelper(spotLight.shadow.camera);
shadowCameraHelper.visible = true;

Adjust these two values until you achieve your desired outcome.

spotLight.shadow.camera.near = 50;
spotLight.shadow.camera.far = 150;

Remember that increasing spotLight.shadow.camera.far will result in a softer and more blurred shadow effect.

For further reference, explore this example on ThreeJS: ThreeJS Example

Answer №2

One potential solution is to tweak the shadow bias to a smaller value, which can help alleviate these problems.

shadow.bias = 0.0001

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

Implementing a Button Click Event Listener on a Separate Component in React

Currently, my React application incorporates MapBox in which the navbar is its parent component. Within the navbar component, there is a button that collapses the navbar when clicked by changing its CSS class. I also want to trigger the following code snip ...

javascriptreactjsmapboxaddeventlistenermapbox-gl-js

Incorporate personalized buttons into your Slick Carousel

Looking to add custom previous and next buttons to a slick carousel? I attempted using a background image on the .slick-prev and .slick-next CSS classes, as well as creating a new class following the documentation, but unfortunately, the arrows disappeared ...

javascriptcssslick.js

The initialization of the R Shiny HTML canvas does not occur until the page is resized

I am currently facing an issue while integrating an HTML page with a canvas into my shiny R application using includeHTML(). The packages I am using are shiny, shinydashboard, shinycssloaders, dplyr, and DT. Everything is working perfectly fine except for ...

javascripthtmlcssshinyhtml5-canvas

What is causing the presence of NaN?

Initially: https://i.stack.imgur.com/2n1Zk.png After Interaction: https://i.stack.imgur.com/Of0pO.png $(document).ready(function () { var output = document.getElementById("whole"); if (!navigator.geolocation) { ...

javascriptjquery

I'm curious about the purpose of the "^=" operator in this algorithm for finding the unpaired numbers. What exactly does it do?

I came across a fascinating code snippet that helps find a unique number in a list of duplicate numbers (where each number appears twice, except for one). function findNonPaired(listOfNumbers) { let nonPairedNumber = 0 listOfNumbers.forEach((n) => ...

javascriptbit-manipulationbitwise-operators

Uppercase the initial letter in a term to indicate a standard condition

I'm struggling to override the CSS in material UI. Even though I tried capitalizing both words, it only changes on selected and hover states, Is there a way to change it in the normal state as well? I've tried debugging but can't seem to fin ...

javascripthtmlcssreactjsmaterial-ui

Upon selecting the display image option

Here is a jsfiddle file provided for your reference. I am attempting to create a functionality where upon clicking buttons (1,2,3,4), the corresponding image shows up and overlaps with any previously displayed images. I have tried using the following code ...

javascripthtmlcss

The discrepancy between the heights of a div using Jquery and JavaScript

There is a container div encompassing all the site's content, which dynamically stretches. Additionally, there are multiple other divs that also stretch using the same method as in 20 other sites. Despite trying various methods with jQuery and JavaSc ...

phpjavascriptjqueryhtml

Enhancing time slot height on Fullcalendar V5: A step-by-step guide

Curious about adjusting the height of time slots in Fullcalendar V5 - any tips? ...

javascriptvue.jsfullcalendarfullcalendar-scheduler

The getter method in the Vuex store object seems to be returning varying values when accessing nested properties

Currently, my Vuex store is being used to store a user object. This code snippet is a getter function for the user object: getters: { user: (state) => state, isAuthenticated: state => { console.log("user object", state); ...

javascriptvue.js

JavaScript Animation: Enhancing TextBox Borders

I'm exploring an idea for a loading animation, but I'm feeling a bit lost on where to begin. Basically, I have a text box that gets populated automatically with JavaScript on the page, however, it takes some time to load. I want to create somethi ...

javascripthtmlcssweb

The hyperlink activation event is malfunctioning

There seems to be an issue with the "Goods" link not working after clicking on "Shops." <div class="i_find"> <div class="replaced_link">Goods</div> <div class="link_container"><a href="#" class="a_shops">Shops</a&g ...

javascriptjquery

The Three.js GLSL shader encountered a compilation error

I encountered a compile error message: THREE.WebGLShader: Shader could not compile. I attempted to use shaders from shaderfrog.com, but unfortunately they did not compile correctly. To troubleshoot, I added my new vertex and fragment shaders to the DOM a ...

javascriptthree.jsglsl

Combining numerical values within an array using JavaScript

Below are different buttons ranging from 1 to 9 that I have: <button type="button" onclick="calculatorNumber(1)"> When clicked, the following function is triggered: function calculatorNumber(i) { myNumbers.push(i); var x = document.getElem ...

javascript

Issue with breakpoints functionality in MUI v5 and React project

I've been attempting to utilize breakpoints for responsive design on my website, but unfortunately, it doesn't seem to be working correctly. Every time I implement a breakpoint, the entire page goes blank. Below is the code snippet I am working w ...

javascriptreactjsmaterial-ui

Activate a click event on an element using Simple HTML DOM

I need assistance in triggering a click on the element below and then retrieving its innertext. <a class="btn btn-sm btn-default" href="javascript:;" onClick="score(238953,this)">Show result</a> Once the "onClick" event is triggered, the elem ...

javascriptphpjqueryhtmlsimple-html-dom

Steps to configure ExpressJS to listen on a custom domain

I'm trying to set up ExpressJS to listen on a specific domain, as I just acquired a new domain. I want Express.JS to be able to listen on this domain without specifying any ports. Can anyone provide guidance on how to accomplish this? If Express doesn ...

javascriptexpressdnslisten

Accessing the observable's value by subscribing to it

There is a defined observable called imageOptions$ in my code: imageOptions$: Observable<BoundImagesToProject[]> = this.imagesService .getBoundImages({ projectId: this.projectId }) .pipe(map((images) => (images.data))); and it is used in the temp ...

javascriptangulartypescriptrxjsobservable

Should we focus on constructing a category tree for the server or the client side?

For my web application, I have a category tree that is stored in a MySQL database. The app retrieves the data through AJAX calls. I am debating whether to construct the tree on the server side or the client side. Should the server return the constructed ...

javascriptbackbone.jsarchitecturetree

Exploring Angular Firebase Database Queries

This is my TypeScript file import { Component, OnInit } from '@angular/core'; import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable } from 'angularfire2/database'; @Component({ selector: 'app-candidate- ...

javascriptangularfirebasefirebase-realtime-databaseangularfire2