Shadows in Three.js are failing to render

After reviewing all the shadow-related posts here, none of them seemed to apply to my issue or I may have just missed it about 10 times.

Check out this link for more information.

I wanted to create a fiddle for this problem, but unfortunately, the version they host doesn't seem to be compatible with my code or the current version of Chrome. I tried changing some elements like .merge and BoxGeometry back to GeometryUtils and CubeGeometry respectively, but that didn't resolve the issue.

My main problem is that I'm not getting any shadows using three.js v .71

I've made sure that all the necessary booleans are set correctly for casting shadows, my scene is within the shadow map boundaries, and I'm using the correct light type. Can anyone help me figure out why I'm not seeing any shadows?

javascriptthree.js

Answer №1

This information may not be of much use to others, unfortunately...

The correct spelling should be receive.

floor.receiveShadow = true;
city.receiveShadow = true;

Additionally, check out this article on self-shadowing glitches.

Using three.js version r.71

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

How to instantly return progress bar to zero in bootstrap without any animations

I am currently working on a task that involves multiple actions, and I have implemented a bootstrap progress bar to visually represent the progress of each action. However, after completion of an action, the progress bar is reset to zero using the followi ...

javascriptjquerycsstwitter-bootstrap

What is the best way to choose just the items with a distinct key from within this jQuery assortment?

[Object, Object, Object, prevObject: jQuery.fn.init[3], context: undefined] 0: Object 1: 1 2: 2 3: 7 __proto__: Object 1 : Object 1: 6 2: 2 3: 5 6: 15 __proto__: Object 2 : Object 1: 3 2: 2 3: 5 5: 7 ...

javascriptjquery

The function inArray() in jQuery will return a value of -1 when an array consists of

When using jQuery inArray, if the array contains only one element, it will return -1. var a = Array(1); console.log($.inArray(1,a)); This result is -1. However, if the array has 2 or more elements, it functions correctly. var a = Array(1,2,3); console.l ...

javascriptjquery

Switching up icons using React Spring - a step-by-step guide!

Is it possible to change the icon when I click on it using react spring? For example, if I click on " ...

javascriptcssreactjsreact-spring

The Protractor test scripts are running with lightning speed, outpacing the webpage loading time

Seeking guidance on automating an angular js website with login functionality. Need to click on the sign-in link and enter username and password, but facing issues with script execution speed being faster than page load. Here is my approach for handling th ...

javascriptangularjsseleniumselenium-webdriverprotractor

Strategies for extracting data from a third-party website that utilizes JavaScript to set the value

Before, I would use jQuery to load external website content such as html or json. Sometimes, I even utilized a proxy PHP page in order to bypass strict origin policies on certain sites. However, I've encountered an issue with some websites. In the HT ...

javascriptphpjquery

Cannot trigger event ascn.onchange does not exist as a function

Need to trigger the onChange function and pass parameters within it. Here's what I have tried: setTimeout(function() { document.getElementById(input.key)?.onchange({}) }, 200); Encountering the following error message: cn.onchange is not a function ...

javascriptangulartypescripttimer

The significance of the dollar sign in ReactJs

Why is the $ symbol placed after the 'add' and 'tab' in the activeKey and the tab in the given code snippet? addNum=0; onAdd=()=> { this.addNum++; let panes=Array.from(this.state.panes); let activeKey=`add$ { this.addNum ...

javascriptreactjs

Using *ngIf and *ngFor in Angular to switch between divs depending on their index values

Is there a way to toggle between two divs based on the index value using *ngIf in Angular? I have attempted to do so by toggling boolean values of true and false, but my current approach is not working. Here is what I have tried so far: <div *ngFor=&qu ...

javascripthtmlangular

Can the selected week be highlighted along with the corresponding week number in a row?

Can we display the number of the week in a row along with the selected week, either in the toolbar or somewhere else? I attempted to utilize ToolbarComponent, but it overrides the entire header. However, I would like to keep it as is and just add informat ...

javascriptreactjsmaterial-ui

How can I pass a value from a jQuery variable to a PHP variable?

Utilizing jQuery to create a table based on the output of JSON. The JSON values are retrieved from a SoapClient, which is functioning correctly and producing the desired output. https://i.sstatic.net/vJbfW.png Now, the goal is to assign the value of the ...

javascriptphpjsonwsdlsoap-client

Optimal method for detecting changes in a React webpage

As I create React hook components that utilize Material-UI input controls, I have searched extensively but have not found a satisfactory example. My goal is to display a popup message to the user if they have made changes to an input field, checkbox, rad ...

javascriptreactjsreact-native

The Consequences of Using Undeclared Variables in JavaScript

What is the reason behind JavaScript throwing a reference error when attempting to use an undeclared variable, but allowing it to be set to a value? For example: a = 10; //creates global variable a and sets value to 10 even though it's undeclared al ...

javascriptjquery

React Router isn't displaying any content

I'm facing an issue with react-router-dom where none of my components are rendering and I just see a blank white screen. The content is not being added to my index.html template, even though there are no visible errors. Interestingly, it mentions that ...

javascriptreactjsreact-routerreact-router-dom

Aligning PlaneGeometry with the dimensions of a texture image

Is there a way to prevent a PNG image texture from being stretched on a Three.js planeGeometry that is larger than the original image size? Can the geometry be automatically sized to fit the image texture, or at least avoid stretching? Instead of saving t ...

javascriptthree.jstextures

Leveraging the array for fetching JSON data

I'm currently utilizing this code snippet to parse json data: $.getJSON(geocodingAPI, function (json) { // Extracting variables from the results array var address = json.results[0].formatted_address; console.log('Address : ', a ...

javascriptjqueryjson

Cookies are mysteriously invisible in the developer console of Safari/Chrome when using the Set-Cookie Header, yet they miraculously appear in server logs

Storing cookies for my web app using the 'Set-Cookie' header response from my python backend has been a challenge. https://i.stack.imgur.com/XMx35.png An ajax call on the client-end to the function is where I run into issues: https://i.stack.im ...

javascriptajaxcookiesgoogle-chrome-devtoolssafari-web-inspector

The Material UI Rating Component is malfunctioning and showing an incorrect value

I'm currently working on a component loop that takes in async data. Everything is rendering properly except for the first component, where the Rating component isn't displaying its value correctly (it just shows 0 stars). Here's the code: & ...

javascriptreactjsmaterial-ui

Missing transitive dependencies have been identified within the node_modules directory when using npm

In my software development journey, I am working on two npm projects - one called X and the other called Y. Let's say that X relies on angular and has it specified as a dependency in its package.json file. To establish a connection between X and Y, I ...

javascriptnode.jsnpmnpm-link

remove duplicate div using jquery

I inserted several layers dynamically in the following manner <div><p class="locid">2<p></div> <div><p class="locid">1<p></div> <div><p class="locid">2<p></div> <div><p class ...

javascriptjqueryduplicateshide