How can I toggle the "receiveShadow" property in Three.js dynamically?

In my Three.js setup, I have integrated a simple UI where a checkbox adjusts the receiveShadow property of an object. Strangely, when I toggle this checkbox during runtime, the changes are not reflected in the scene.

However, if I perform the same action for the castShadow property, it actually works as expected.

If you need some relevant code snippets, here they are:

renderer.shadowMapEnabled = true;

material.needsUpdate = true;

How can I ensure that toggling the checkbox affects the receiveShadow property too?

javascriptthree.js

Answer №1

To ensure proper updating when toggling the receiveShadow property dynamically, make sure to set the needsUpdate flag for the material.

mesh.receiveShadow = true; // or false
mesh.material.needsUpdate = true;

Once set, the needsUpdate flag will be automatically reset to false by the renderer.

This tip is specific to three.js version r.73

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

Unable to reach the object property while using the $.each method

Upon receiving an object from an ajax request, I am using $.each to iterate through all the appointments in the object. However, I am encountering an issue where the object appears to be undefined within the $.each loop. Here is the code snippet for my req ...

javascriptjqueryajax

Ways to identify if the text entered in a text area is right-to-left justified

Within a textarea, users can input text in English (or any other left-to-right language) or in a right-to-left language. If the user types in a right-to-left language, they must press Right-shift + ctrl to align the text to the right. However, on modern O ...

javascriptjqueryhtmlcssright-to-left

What is preventing me from making a call to localhost:5000 from localhost:3000 using axios in React?

I have a React application running on localhost:3000. Within this app, I am making a GET request using axios to http://localhost:5000/fblogin. const Login = () => { const options = { method: "GET", url: "http://localhost:5000/fblogin", ...

javascriptreactjsexpressmern

Sleek transition-ready zoom functionality for THREE JS with clickable controls

Hey there, I've been attempting to animate a transition between scenes in THREE js for quite some time now. I have successfully cleared the scene and recreated the next one, but the transition between them is proving to be quite challenging. I have cr ...

javascriptthree.js

Javascript function fails to trigger when clicked

<body ng-app="starter"> <ion-pane> <ion-header-bar class="bar-dark"> <h1 class="title">AppifyLife</h1> </ion-header-bar> <ion-content> <center><div class="card" id="life"><h3>20< ...

javascriptjqueryhtmlfunctiononclick

Create dynamic cells for CSS grid using JavaScript

I have been manually generating grid cells in a specific pattern by copying and adjusting <div> elements. Although this method works, I am interested in creating an algorithm that can automatically generate the desired layout. The left box in the exa ...

javascripthtmlcssalgorithm

Transitioning code from gatsby to nextjs has caused an issue with the aws-sdk integration

I have successfully integrated the aws-sdk with Gatsby by using a .env file to upload a file to an S3 bucket. Now, I am in the process of migrating this functionality to Next.js, but I'm encountering an error in Next.js. Uncaught (in promise) Credent ...

javascriptamazon-s3next.js

Trouble with virtual canvas when attempting to put image data

I am new to the virtual canvas concept and I'm having trouble with the code below. Can anyone help me figure out why it's not working? <script type="text/javascript"> $(document).ready(function () { var c1 = docu ...

javascripthtmlcanvasoff-screen

Node Express JS: Efficiently handling multiple fetch responses before sending data to client

My goal is to call an API that only accepts one animal name at a time, but I receive the names of multiple animals in a query separated by commas. To achieve this, I plan to call the API once for each animal, push the JSON data into an array, and then resp ...

javascriptnode.jsexpressasync-awaitfetch

Using NextJs <Script> is only effective after a page has been reloaded

Currently delving into the world of NextJS and encountering an issue with integrating a third-party ebay script onto one of my route pages. The script only seems to appear sporadically upon reloading the page. However, when navigating to the store page via ...

javascriptreactjstypescriptnext.js

Ways to include additional details in each row of an autocomplete feature

I have successfully implemented autocomplete for venues worldwide, but now I want to display the address of each venue below its name. For example, if the autocomplete suggests the venue name as ABCD, I want the address of that venue to appear right benea ...

javascriptjqueryautocomplete

What is the best way to ensure a cron job executing a Node.js script can access variables stored in an .env file?

Currently, I have a scheduled job using cron that runs a Node.js script. This script utilizes the dotenv package to access API keys stored in a .env file. Running the Node.js script from the command line retrieves the variables from the .env file successf ...

javascriptnode.jsubuntucronenvironment-variables

Incorporating external .js files from a different server using node.js

Is it possible to include .js files from another server into a node.js program? I cannot simply use require('./local_file.js') to fetch files over the Internet like this: require('http://www.server.com/path/file.js'); I attempted usin ...

javascriptnode.js

Using axios to call a web API method from within a ReactJS web worker

Currently, I am utilizing Web Worker alongside ReactJS (Context API schema) and encountering a particular issue. The design of my Web API and Context is outlined below: WebWorker.js export default class WebWorker { constructor(worker) { let code = ...

javascriptnode.jsreactjs

Trouble with AngularJS ui-router: template fails to show up

I have been diving into a tutorial on egghead.io that delves into application architecture, tweaking certain components to fit my specific application needs. Just a heads up, I am relatively new to Angular, so I'm hoping the issue at hand is easy to ...

javascriptangularjsangular-ui-router

Is React Context suitable for use with containers too?

React provides an explanation for the use of Context feature Context in React allows data sharing that can be seen as "global" within a tree of components, like the authenticated user, theme, or language preference. Although this concept works well for ...

javascriptreactjsreact-reduxmobxreact-context

Struggling to access the height attribute from a CSS file

Hey there. I'm pretty confident that the solution to my query is quite simple. So, I have a .css file with this particular code snippet: div.site { text-align:center; border:2px solid #4b6c9e; padding:1px; margin-top:10px; font-size:medi ...

javascriptjqueryhtmlcss

The 'file' property of undefined throws an error in ng-file-upload

I am currently exploring the functionality of ng-file-upload from this repository: https://github.com/danialfarid/ng-file-upload I have successfully implemented the basic setup as follows: HTML: <section ng-controller="MyController"> ...

javascriptangularjsdom-eventsng-file-upload

"The Material UI date picker is encountering an issue with the error prop, which is being evaluated

I have developed a date picker that utilizes the Jalali calendar. While attempting to pass error checking using the error prop in the following code: <LocalizationProvider dateAdapter={AdapterJalali}> <MobileDatePicker label={lab ...

javascriptreactjsmaterial-uireact-datepicker

Executing a function within another function (triggering the logout action by clicking the logout link) in ReactJS

Is there a way to access a method outside the render function and call it inside another function in order to log out the user with a simple click? I encountered the following error: Cannot read property 'AuthLogout' of undefined Let me shar ...

javascriptreactjs