The shadow cast by the point light in Three.js seems to be misplaced

Take a look at this JS fiddle to view my code. I'm encountering an issue where there is a gap between the object and its shadow. Interestingly, this gap does not occur with spot lights. Any suggestions on how I can resolve this?

Highlighted code snippets:

  //MATERIAL
  var material = new THREE.MeshLambertMaterial();
  var terrainMaterial = new THREE.MeshStandardMaterial();

  //GEOMETRY
  var geometry = new THREE.BoxGeometry(100, 100, 100, 10, 10, 10);
  var terrainGeometry = new THREE.PlaneGeometry(10000, 10000, 100, 100);

  var mesh = new THREE.Mesh(geometry, material);
  mesh.position.z = -500;
  mesh.position.x = -100;
  mesh.position.y = -50;
  scene.add(mesh);

  var terrain = new THREE.Mesh(terrainGeometry, terrainMaterial);
  terrain.rotation.x = -90 * (Math.PI / 180);
  terrain.position.y = -100;
  scene.add(terrain);


  // pointlight
  var light = new THREE.PointLight(0xffffff, 2.0, 1200);
  scene.add(light);
  var pointLightHelper = new THREE.PointLightHelper(light);
  scene.add(pointLightHelper);

  light.position.y = 100;
  light.target = mesh;
  light.castShadow = true;
  light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 100, 1, 500, 1000 ) );
  light.shadow.bias = 0.0001;
  light.shadow.mapSize.width = 512;
  light.shadow.mapSize.height = 512;
  scene.add(light);

  mesh.castShadow = true;
  terrain.receiveShadow = true;

Answer №1

Contrary to popular belief, the "shadow camera" consists of 6 perspective cameras, all with a 90-degree field-of-view. This means that when adjusting the shadow camera, it's important not to alter the fov.

  light.shadow = new THREE.LightShadow( new THREE.PerspectiveCamera( 90, 1, 500, 1000 ) );

This information pertains to three.js version r.92

Answer №2

Experiment with reducing the bias value. Move the light source closer or further away to observe the effect. Increase the shadow resolution to either 1024 or 2048 for further comparison.

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

Searching for the most recent selected element from a multiple select tag in jQuery

Incorporating a <select multiple="multiple" id="multi"> on my website, I've implemented a jQuery script with the following function: $("#multi").on("change", function(){}) My goal is to retrieve the most recently selected item from the select ...

Is it possible to exchange CSS classes for a specific group of elements using JQuery?

I have two list items listed below: <li name="luxury" class="cars luxury> <div id="featured_lux" name="featured" class="carImg_lux col2_lux "> My Luxury Car<img border="0" class="car-im ...

Dealing with ReactJs Unhandled Promise Rejection: SyntaxError - Here's the Solution

Struggling to use the Fetch API in ReactJS to retrieve a list of movies. Encountering an issue, can anyone offer assistance? fetch("https://reactnative.dev/movies.json", { mode: "no-cors", // 'cors' by default }) ...

Troubleshooting the issue with dynamically adding form fields in AngularJS

I am currently working on an online course application and facing an issue with adding form fields dynamically to include additional video lectures for each course. When I attempt to click on the "Add Another URL" button, nothing happens. https://i.sstatic ...

IE throwing an invalid argument error when making an AJAX request

I have a strange issue with my ajax request - it works perfectly fine in all browsers except for IE, specifically IE10! The error message I am encountering in the IE console is as follows: SCRIPT7002: XMLHttpRequest: Network Error 0x80070057, Invalid arg ...

Receiving encoded characters in the response

URL: I have encountered an issue where I am trying to retrieve the PDF file from the URL above using code. In tools like Postman or Insomnia, I am able to see the output as expected in PDF format. However, when I attempt it with code, I am receiving rando ...

What's the process for changing this arrow function into a regular function?

Hello from a child component in Vue.js. I am facing an issue while trying to pass data from the parent via sensorData. The problem lies in the fact that the arrow function used for data below is causing the binding not to occur as expected. Can anyone gu ...

The Node module's package.json does not have a main "exports" defined

After recently adding the zx NPM package to my project, I encountered a puzzling issue. The installation went smoothly, and I proceeded to import it into my code: import { $ } from 'zx' (async () => { await $`mkdir test` })() However, u ...

Navigating the rollout of a fresh new design

When implementing a new design on a website, how can you bypass the need for users to clear their browser cache in order to see the updated changes? Is there a way to automatically refresh the cache once a new version of the website is uploaded, or are th ...

What are the best ways to prioritize custom events over ng-click events?

Recently, I developed a web application using AngularJS. One of the features I included was an input text box with a custom ng-on-blur event handler. Due to some issues with ng-blur, I decided to create my own custom directive called ngOnBlur. Here's ...

Replace the icon in Material UI Stepper for steps that have errors

I am utilizing Material UI's Stepper component to display a checklist in this manner. The image below is from their documentation. https://i.sstatic.net/KfUos.png While attempting to add an error state to the checklist, I discovered a prop called er ...

How can I arrange the ng-class based on the clicked item's order?

http://plnkr.co/edit/pUtuZy?p=preview In this scenario, there are three different border classes available: .border1 { border: 1px solid #66FFFF; } .border2 { border: 1px solid #33CCFF; } .border3 { border: 1px solid #0099FF; } The goal is to as ...

Modify the color of the field that is currently chosen

Is there a way to modify the highlight color of the active record in an extjs combobox? In the image provided below, the record Petty Cash Fund is currently selected in my dropdown, but the highlighting is not very visible. How can I adjust this for all co ...

Exploring the Fusion of Material UI Searchbox and Autocomplete in React

Looking for help with my AppBar component from Material UI. I want the Searchbox field to function similarly to what is seen on https://material-ui.com/. It should appear as a Searchbox but display selectable options like Autocomplete after entering input. ...

The post body is incomplete and is lacking the necessary parameter "To" that

It seems there might be a configuration issue either in the header or the body. Should I make changes to the headers or is it possible that the body is misconfigured? const axios = require('axios'); const url = '/my_url'; const aut ...

Using iTextSharp in .Net to convert the action result into a downloadable pdf file via ajax

I have been successfully using iTextSharp to convert a razor view into a downloadable PDF via a C# controller. While the current implementation is functioning perfectly, I am seeking a way to transmit a model from a view to the PDF controller and enable th ...

Learn how to synchronize global packages across multiple computers using npm

After installing several npm global packages on my work computer, I am now looking to synchronize these packages with another device. In a typical project, we utilize a package.json file to keep track of package details, making it easy to install all the ...

If a user cancels, the radio button in Vue 3 will revert back to

I'm encountering a problem with radio buttons in vue 3. When passing an object from the parent component to the child for data display, I want to set one version as default: <template> <table> ... <tr v-for="(v ...

How to deal with jQuery's set val() behavior on SELECT when there is no matching value

Let's say I have a select box like this: <select id="s" name="s"> <option value="0">-</option> <option value="1">A</option> <option value="2" selected>B</option> <option value="3">C</option> </ ...

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...