The inability to create a shadow

I have created a table mesh and I want to cast shadows on the floor mesh. Despite my efforts with ShadowMap, I am unable to achieve the desired result.

This is how it currently looks:

camera & scene

 const scene = new THREE.Scene();
    const camera = new THREE.PerspectiveCamera(35, (window.innerWidth / window.innerHeight), 0.1, 1000);
    camera.position.z = 8;
    camera.position.y = 2;
    camera.lookAt( scene.position );

The table mesh

    const boxWidth = 1; const boxHeight = 0.1; const boxDepth = 1;
    const tableBoardGeometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
    const textureLoader = new THREE.TextureLoader();
    const customPicture = textureLoader.load('https://threejsfundamentals.org/threejs/lessons/resources/images/compressed-but-large-wood-texture.jpg')
    const tableBoardMaterial = new THREE.MeshLambertMaterial({map: customPicture, wireframe: false})
    const tableBoard = new THREE.Mesh(tableBoardGeometry, tableBoardMaterial)
    tableBoard.position.set(0, 0, 0)
    tableBoard.castShadow = true;

The lighting & shadow setup

    const lightAndShadow = () => {
        const ambientLight = new THREE.AmbientLight(0xffffff, 0.75);
        const lightIntensity = 1.3; const lightDistance = 18;
        const light = new THREE.PointLight(0xffffff, lightIntensity, lightDistance);
        light.position.set(1, 1, 1)
        light.castShadow = true
        light.target = tableBoard;
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.PCFShadowMap;
        light.shadow = new THREE.LightShadow(new THREE.PerspectiveCamera(100, 1, 500, 1000))
        light.shadow.bias = 0.0001
        light.shadow.mapSize.width = 2048*2
        light.shadow.mapSize.height = 2048*2
        scene.add(light, ambientLight);
}

The floor mesh

const floorWidh = 20; const floorHeight = 20; const floorWidthSegments = 50; const floorHeightSegments = 50;
    const floorGeometry = new THREE.PlaneGeometry( floorWidh, floorHeight, floorWidthSegments, floorHeightSegments );
    floorGeometry.rotateX( - Math.PI / 2 );
    const floorTexture = new THREE.TextureLoader().load('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQOOcWSD0K2mPwokAFfZIhq5Xl49bh8B17RlU6NqCGa4UOKydgX');
    floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
    floorTexture.repeat.set(20, 20);
    const floorMaterial = new THREE.MeshBasicMaterial({color: 0xFFFFFF, wireframe: false}),
    floor = new THREE.Mesh( floorGeometry, floorMaterial );
    floor.position.set(0, -tableLegHeightPosition, 0)
    floor.receiveShadow = true;

If you have any suggestions on how I can make the shadows work properly, please let me know.

Answer №1

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

The current configuration is adjusting the camera parameters of LightShadow, specifically setting the Near Clipping Plane to 500, causing the shadows on the tableBoard to vanish.

To resolve this issue, consider resetting the number back to the default value of 0.5 or something close to it. Using a near clipping plane value of 500 is excessive in this context.

As per the documentation:

.shadow : LightShadow

A LightShadow that computes shadows for this light source.

The lightShadow's camera is configured with a PerspectiveCamera having a field-of-view (fov) of 90, aspect ratio of 1, near clipping plane set at 0.5, and far clipping plane at 500.

For further information on Point light shadows in Three.js, please refer to the complete documentation 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

What is the best way to invoke a function within an AngularJS controller?

Currently, I am exploring the most efficient method of calling a function from an AngularJS controller externally. In our setup, data is transmitted from a Python backend to the frontend using JavaScript functions. To feed this data into the Angular contr ...

Creating a click-away listener feature in your Next js application

I have a reusable component called DropDown and a custom hook called useClickOutside. I am utilizing the context API to manage multiple dropdowns with unique ids. Code for useClickOutside import { useEffect, useRef } from "react"; import { toUSV ...

What is the best method to send a HTTP request (specifically for scraping) to an Angular2 website?

I am attempting to utilize a node server to extract data from an angular2 application. However, the issue I am encountering is that the response I receive is just the index.js file, which essentially represents the "loading..." section of the webpage. My ...

The Node function will yield a BluebirdJS Promise

I've encountered a minor issue with this script. While it functions properly, the "runTenant" method is not returning a promise that needs to be resolved with "all()". Here's the code snippet in question: Promise.resolve(runTenant(latest)).then ...

How can you annotate and inherit a class method that returns an array of itself?

In the following example, I present a simplistic representation of code that may not align with standard HTML or front-end conventions. Please excuse any confusion this may cause. TL, DR I am facing challenges in specifying a return type for a method tha ...

Looking for a way to update template variables in copy using grunt?

I am currently utilizing load-grunt-config along with grunt-contrib-copy. My objective is to have the copy task replace certain template tags using the 'process' option. I understand that replacing template tags is feasible based on the grunt-co ...

Retrieve information from MongoDB and showcase it on the user interface

I am a beginner in NodeJS and server-side technologies, currently working on building a simple app that involves data insertion into a MongoDB database. I am using express-handlebars for this project. While I have successfully saved the data into the data ...

An error occurs with Three JS when trying to access a S3 Bucket used as a CDN due to Cross Origin

function displayItem() { startScene(); THREE.ImageUtils.crossOrigin = "anonymous"; var mtlLoader = new THREE.MTLLoader(); mtlLoader.setTexturePath('https://cdn.rubyrealms.com/textures/'); mtlLoader.setPath('https://cdn.ru ...

The process in mocha does not execute when using await

"It" in the Mocha testing framework does not execute when using the await keyword. My approach involves employing functions for asynchronous file reading and then processing the test based on the returned value. I utilize these file read functions multipl ...

How can I replay an HTML audio element?

I created an HTML5 page with an audio element for playing music in mp3 format. However, when the music plays to the end, it stops and I'm using JavaScript to control the audio element. Even so, I can't seem to replay it, only stop it. Is there a ...

An effective method for converting MongoDB's JSON array of UTC dates to local time using Node.js

Using Node.js to query MongoDB and encountering an issue with Date (ISODate) fields. After querying, the Date format returned is as follows: DT : 2014-10-02T02:36:23.354Z The goal is to efficiently convert the DT field from UTC to Local Time ISOString. F ...

Drop down list not showing array values

I am attempting to populate a dropdown list with elements from an array using the Document Object Model (DOM) within a for loop. However, I keep encountering an error stating that the dropdown list is null. Here is the JavaScript code I am using: var st ...

Refresh all tabs in the TabContainer

I have implemented multiple tabs using dojo on a web page, and I need to refresh the current tab every 5 seconds without refreshing the entire page. You can check out the code in this fiddle: http://jsfiddle.net/5yn2hLv9/4/. Here is an example of the code ...

Waveform rendering in HTML5 using wavesurfer.js struggles to handle large mp3 files

Recently, I was considering incorporating wavesurfer.js into one of my projects so I decided to explore the demo on To test it out, I uploaded a large mp3 file (approximately 2 hours long) onto the designated area in the middle of the page. It appeared to ...

Obtaining JSON data in React Native without prior knowledge of the key

When I receive this type of data, the keys are common but the items vary. How can I extract and add this data to my list of categories? { "99": "Venues", "100": "Party Supplies", "101": "Enter ...

Why does running the code result in the error mentioned above?

Uncaught ReferenceError: Unable to process binding "value: function (){return sumValBinding }" Message: sumValBinding is not defined Here is the HTML code snippet: <div class="form-group"> <label for="inputdefault">First numbe ...

How about I visit the campgrounds/edit page for a change?

In this get route, the previous link it was redirected from is stored in the req.session object under returnTo. Once redirected, it goes to the /login and we are able to view the object in the console. router.get('/login', (req, res) => { ...

The functionality of event.charCode is ineffective in Firefox

I'm in a dilemma with restricting my text field to only accept numbers. Currently, I have the following code snippet: onkeypress="return (event.charCode >= 48 && event.charCode <= 57)" The issue arises when I attempt to delete (using b ...

Is there a comparable solution like Fabric in Javascript or Node.js?

One thing that I really appreciate about Fabric is how it simplifies the deployment process to multiple servers, especially with its strong support for SSH. But since our project is based on node.js, it would be ideal if we could achieve a similar function ...

A guide on executing multiple Post Requests in Node.js

Currently, I am facing some issues with my code while attempting to make multiple post requests based on certain conditions. The goal is to retrieve data from an online database (Firebase), save it locally, and then delete the online data. Here's wha ...