Why are shadows missing from the three.js environment?

camera setup:

 Camera = new THREE.PerspectiveCamera(45, Width / Height, 0.1, 10000);
 Camera.position.set( 150, 400, 400);
  Scene.add(Camera);

Lighting configuration

 Light = new THREE.SpotLight(0xffccff,.5, 0, Math.PI/2, 1);

Light.position.set(0, 2000, 0);
Light.castShadow = true;
Light.shadowBias = -0.0002;

Light.shadowCameraNear = 850;
Light.shadowCameraFar = 8000;
Light.shadowCameraFov = 600;
Light.shadowDarkness = .7;

Light.shadowMapWidth = 2048;
Light.shadowMapHeight = 2048;
Scene.add(Light);

Renderer settings

 Renderer = new THREE.WebGLRenderer({
    antialias: true,
    sortObjects: false,
    preserveDrawingBuffer: true,
    shadowMapEnabled: true

});

document.body.appendChild(Renderer.domElement);
Renderer.shadowMap.type = THREE.PCFSoftShadowMap;
Renderer.shadowMap.cullFace = THREE.CullFaceBack;
Renderer.gammaInput = true;
Renderer.gammaOutput = true;
Renderer.setSize(window.innerWidth, window.innerHeight);

This function is used to add a 3D model

 function getModel(path, texture) {

            var Material = new THREE.MeshPhongMaterial({shading: THREE.SmoothShading,
                specular: 0xff9900,
                shininess: 0,
                side: THREE.DoubleSide,
                shading: THREE.SmoothShading

            });


           Loader = new THREE.JSONLoader();
            Loader.load(path,function(geometry){

                geometry.mergeVertices();
                geometry.computeFaceNormals();
                geometry.computeVertexNormals();

                TextureLoader.load(texture,function(texture){


                Mesh = new THREE.Mesh(geometry, Material);
                Mesh.material.map = texture;
                Mesh.material.map.wrapS = THREE.RepeatWrapping;
                Mesh.material.map.wrapT = THREE.RepeatWrapping;
                Mesh.material.map.repeat.set(38, 38);
                //Mesh.position.y -= 1;
                Mesh.position.y = 160;
                    Mesh.position.x = 0;
                    Mesh.position.z = 0;
                Mesh.scale.set(40, 40, 40);
                Mesh.castShadow = true;
                Mesh.receiveShadow = true;
                Scene.add(Mesh);

                });
            });
        }

The plane that receives shadows is defined as:

var planeGeometry = new THREE.PlaneBufferGeometry(100,100);
var planematerial = new THREE.MeshLambertMaterial(
{
shininess: 80,
color: 0xffaaff,
specular: 0xffffff
});

var plane = new THREE.Mesh(planeGeometry, planematerial);
plane.rotation.x = - Math.PI / 2;
plane.position.set(0,100,0);
plane.scale.set( 10, 10, 10 );
plane.receiveShadow = true;
plane.castShadow = true;
Scene.add(plane);

I made adjustments to the lights' positions and modified the values of shadowCameraNear, Light.shadowCameraFar, and Light.shadowCameraFov, but I could not see any changes reflected in the scene.

Answer №1

The camera's current position is set at coordinates (150, 400, 400), while the object creating the shadow resides at (0, 160, 0). The recipient of the shadow is located at (0, 100, 0), and the frustum for the shadowCameraNear has been established at a distance of 850 units. This means that there is a significant gap between the camera and the objects being shadowed, highlighting the need for adjustments in positioning. For assistance, you have the option to activate debug mode by setting

Light.shadowCameraVisible = true;

This will display the camera frustum and aid in resolving any issues.

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

Deactivate event handling for viewport widths below a specified threshold

Currently, I am attempting to deactivate a script when the width of the window falls below 700px. Despite reviewing suggestions from various sources, I have not been successful so far. window.onresize = function () { if(window.innerWidth < 700) { ...

Several jquery libraries are experiencing malfunctions

<head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $(".slidingDiv").hide(); $(".show_hide").show().click ...

Getting the true height without needing jQuery

let element = document.getElementById('test'); console.log(element.scrollHeight); <div style="height: 30px;" id="test"> <p>ffffffffff</p> <p>gggggggggg</p> ...

Why is this <div> element refusing to budge according to my jQuery commands?

Currently embarking on a jQuery coding challenge where I am attempting to maneuver a circle around the page in a square pattern. Numerous methods have been tested with no success thus far. While I would like to showcase my various attempts, it would prove ...

Learn how to design a customized loading screen using CSS with Phonegap

Currently working in Android with Phonegap / Cordova, I am faced with the challenge of optimizing page loading time due to numerous DOM objects being created. To address this issue, I am attempting to implement a "Loading..." screen to prevent users from b ...

"The issue persists with multiple JavaScript forms failing to work as expected when preventDefault

Within a jQuery document ready function, I've included the following code: jQuery("#frmUpdateDet").submit(function (e) { jQuery.ajax({ type: 'POST', url: './php/updateCred.php', data: jQ ...

Filtering arrays using Vue.js

I have developed a sample e-commerce website to showcase various products to potential customers. The website boasts features like filters, search functionality, and sorting options to enhance the user experience. However, I've encountered an issue sp ...

Error: An uncaught exception occurred when trying to access a seekable HTML5 audio element, resulting in an IndexSize

While trying to utilize the HTML5 API along with SoundManager2, I encountered an issue. My goal was to determine the duration of a song in order to create a progress bar that would update as the song played. However, every time I attempted to retrieve the ...

The GoogleOAuthProvider failed to retrieve the clientId

Whenever I attempt to retrieve the clientId using GoogleOAuthProvider, a blank popup page keeps appearing. The url displays clientId=undefined and in the console it shows - [GSI_LOGGER]: The specified client ID is not found. Despite my attempts to resolv ...

Data binding in Vue does not function properly within functional components

Clicking the button will cause the number n to increase, but the UI will display it as constant 1. <script> let n = 1 function add() { console.log(n) return ++n } export default { functional: true, render(h, ctx) { return (<div> ...

Unlock the power of WebVR in your WebView using krpano!

After successfully running krpano with WebVR on Chrome and Firefox, I encountered an issue where the cardboard button was not visible or enabled when embedded in a WebView on Android. However, to my surprise, the compiled apk with the WebView showed the ca ...

Issue in Internet Explorer where SVG and jQuery mouse events fail to trigger

We are utilizing an SVG map with multiple areas on which a unique jQuery action is triggered upon hovering. Unfortunately, this functionality fails to work in IE (specifically tested in IE11). To illustrate the issue in a simplified manner, a demo has bee ...

The webpage containing the authRequired meta briefly flashes on the screen, even if there are no active login sessions on Firebase

As a beginner in Vue and web development, I have been enjoying my journey so far but now I find myself stuck. Currently, I am working on creating an admin dashboard with Firebase authentication. Everything seems to be functioning as expected, except for on ...

Finding specific class HTMLElements in TypeScript: A guide to iterating through them

I'm facing a challenge in TypeScript where I need to loop through all HTML elements with a specific class name. My initial attempt was: let elements = [...document.getElementsByClassName("myclass")]; However, I encountered this error messag ...

What is the method for determining if a point lies between two others?

I created a small function that seems to have a glitch... function determineIfPointIsBetweenTwoOtherPoints (pointA, pointB, pointToCheck) { var vectorAB = new THREE.Vector3(); vectorAB.subVectors(pointA, pointB).normalize(); var vectorBA = ne ...

The success function is not functioning properly with the validation engine

I'm having trouble getting this script to function properly as it keeps showing errors whenever I try to run it. $(document).ready(function() { $("#form1").validationEngine({ ajaxSubmit: true, ajaxSubmitFile: "note/note.php", ...

In JavaScript, we have an array of objects where each object contains both another array and an integer value

I'm feeling a bit lost on how to tackle this issue and could use some guidance. I've been struggling to find resources on how to load an array that is nested within an Object. The following function is where I've hit a roadblock: function F ...

When combining Puppeteer with Electron, an error stating "Browser revision not found" may occur. However, this issue does not arise when running with Node

My attempts to make Puppeteer work in Electron have been with various versions of Puppeteer (v5.4.0, v5.4.1, and v5.5.0), on Windows 10/MacOS, and with different Node versions (v12, v14.0.1, v15.0.3). Trying a simple puppeteer.launch() in the main process ...

Invert the normals in Three.JS post geometry flip

I recently came across a solution on stackoverflow that helped me mirror my geometry successfully. However, I noticed that after mirroring it, my geometry turned black. Is there a way to flip the normals at the same time as mirroring the geometry in order ...

Vanishing text within a jQuery-animated container

I have successfully implemented a sidebar menu that expands when hovered over, revealing text that fades in at the same time. However, I am encountering an issue where if the mouse is rapidly moved in and out of the sidebar before the animation completes, ...