Issue with spotlight / shadow camera cutoff in Three.js

I've been grappling with a problem for hours now and could really use some help.

So, I have this spotlight in my scene that I imported from a collada file, but for some reason, the shadow is getting cut off. Even when I turn on the camerashadow helper, it stops exactly where the shadow is being cutoff. I've tried countless times to adjust it, but nothing seems to be working.

Here are the settings I've applied to my spot light:

if (child instanceof THREE.SpotLight) {

        if(child.name == 'R_LIGHT_Spot-01'){

            console.log(child)

            child.castShadow = true;

            child.shadowBias = 0.02;

            child.shadowCameraNear = 0.1;
            child.shadowCameraFov = 35;
            child.intensity = 2.2;


            child.shadowMapWidth = 2048; // default is 1024
            child.shadowMapHeight = 2048; // default is 1024
            child.shadowDarkness = 0.1; // default is 512

        }

    }

Additionally, here are the renderer options for shadows :

renderer.shadowMapType = THREE.PCFSoftShadowMap;
renderer.shadowMapEnabled = true;
renderer.shadowMapSoft = true;

Any assistance you can provide would be greatly appreciated. Thank you!

Answer №1

Don't forget to define the shadowCameraFar attribute for your offspring element as well.

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

"Learn the steps to seamlessly add text at the current cursor position with the angular-editor tool

How can I display the selected value from a dropdown in a text box at the current cursor position? I am currently using the following code: enter code selectChangeHandler(event: any) { this.selectedID = event.target.value; // console.log("this.selecte ...

Import the controller, factory, service, and directive files using Browserify

As I set up my AngularJS application in gulp-browserify, I aim for a clean and organized base structure to accommodate its anticipated size. In the main entry javascript file for browserify, I establish the main angular module and configure routes with ui ...

The Bootstrap Datepicker is always set to display a date that is one day earlier than the selected date

I have encountered an issue with the Bootstrap date-picker where the selected date appears to be one day less when passed to the backend. For example, the date I select in the UI is 04-Apr-1997, but the date shown in the console is 1997-04-03T18:30:00.000Z ...

Copy both the image and JSON object to the clipboard

I am attempting to utilize the clipboard API to write an image and JSON object to the window clipboard. I am working with Vue and Electron and have successfully written an image and plain text, but I encounter an error when trying to write a JSON object: ...

Dispatching identification to controller after submission

I am encountering an issue with a page that contains the following code: <div class="col-sm-2 displaybutton"> <div data-point-to="displaysHeader"> @using (Html.BeginForm("Administration", "Home", FormMethod.Post)) ...

Is there a way to properly position an element in line with the element directly above it using html, css, and

I need help with aligning two <input type="text"> boxes on my form. Currently, I have a dropdown button and one text input in one row, and another text input in the second row (refer to the screenshot below). How can I ensure that the "Choi ...

Manipulating Arrays in order to delete an index

I have been working on a function to manipulate arrays... var myArray = [2, 1, 1, 1, 1]; and I want to transform it into this [3, 1, 1, 1] The function I created accepts 3 parameters ArrayToProcess - the array that will be processed indexTarget - ...

Steps for automatically toggling a button within a button-group when the page is loaded using jQuery in Bootstrap 3

Here is a button group setup: <div class="btn-group" data-toggle="buttons"> <label class="btn btn-default"> <input type="radio" name="environment" id="staging" value="staging" />Staging </label> <label class= ...

Managing QML animation responsiveness to screen resolution adjustments

I am currently developing a highly scalable application using QML. One major issue I'm facing is how to manage screen transitions. For instance, the animation of this element is designed for a 1920x1080 resolution: EventLog{ id: eventlog ...

The supported browser is unable to import ES6 modules

Attempting to incorporate moment.js as an es6 module. The most recent version of Chrome is being utilized. Referring to the conversation here, I experimented with the src path (es6) import * as moment from './node_modules/moment/src/moment' A ...

Stop unauthorized HTTP requests by limiting a web application to only communicate with specified domains

I have come up with an innovative security feature idea for browsers/web clients, but I have not been able to find any information or discussions about it. Therefore, I am seeking an answer to determine the feasibility and necessity of such a feature. Que ...

The error message "Unable to display 'show' property of undefined using $mdToast" is displayed

I can't seem to figure out what's causing this issue... Following the Angular material design guidelines, I expected this code to work. However, I keep getting an error that says: TypeError: Cannot read property 'show' of undefined H ...

The drag and drop feature seems to be malfunctioning in the Selenium Webdriver when using the Node.js (JavaScript) test automation framework

I am currently utilizing the selenium webdriver along with a customized automation framework built in nodejs. My goal is to implement drag and drop functionality for a slider using the actions class, but unfortunately I am encountering issues. Below you ca ...

Set one value to true while setting all others to false using React hooks

How can we set one option to true and simultaneously change all other options to false? This same action must be applied to multiple states, such as option 2, option 3, and so on. const [state, setState] = useState({ option1: false, opti ...

Transmit information to PHP script using JavaScript

I am facing an issue with sending form data to another PHP file. While the process is working, the problem lies in the fact that once the data is submitted, the page does not redirect to the specific page as intended. It seems like it doesn't work th ...

The button on my VUE 3 quiz app is not changing to 'Finish' when I reach the final question

Struggling with my Vue 3 quiz app - everything works perfectly until I reach the last question. The button text should change to 'Finish' once the final question is loaded. Despite hours of searching and even using copilot, I still can't fin ...

jQuery powered image wall with dynamic scrolling

Can someone assist me in figuring out the best approach for this task? I am interested in creating a scrolling image wall using jQuery. The goal is to display numerous small images (such as Twitter profile pics) tiled one after another across the entire w ...

obtain the string representation of the decimal HTML entity value

Similar Question: how to create iphone apps similar to ibeer, imilk, ibug, ibeer Using javascript to obtain raw html code Imagine having an html section like this: <div id="post_content"> <span>&#9654;<span> </div> ...

ng-bind-html is functional, yet it is raising a TypeError

Below is the code snippet containing the ng-bind-html: <span ng-bind-html="text"></span> Here is the stack trace: angular.js:13236 TypeError: bindings.push is not a function at Function.$$addBindingInfo (http://localhost:9000/bower_component ...

Loop through the geometry's index and set each value

I have managed to create the pattern shown in the image successfully. Currently, I am looking for a way to automate this process. Specifically, every second square needs to be mirrored. If you have any suggestions on an easier approach, please share them ...