The latest iteration of three.js appears to disrupt how light is reflected on meshes

After upgrading from three.js version r110 to r124 for the new features, I noticed a significant change in the way my meshes reflect light. Suddenly, everything looks different and it's quite disappointing! 😢

Can anyone shed light on what changed between these versions causing this effect, and is there a way to fix it without going back to the older version?

I have attached some photos for reference. Picture ONE (r110) clearly shows the light reflection off the cylinder, while picture TWO (r124) lacks that clarity!

Sharing the code is a bit tricky as it's part of a larger project. However, the only difference between these two photos is the three.js version number. Both photos use black standard material and a white point light.

ONE

https://i.sstatic.net/gpzZZ.png

TWO

https://i.sstatic.net/qOukN.png

Answer â„–1

According to my earlier comment...
The default values for roughness and metalness in MeshStandardMaterial were updated in r112.

Therefore, if you set your material's roughness and metalness to the previous defaults of "0.5", it should result in a material that appears the same as before r112.

Answer â„–2

I found that the solution provided as the accepted answer was not applicable to my specific situation. My scenario involved a series of THREE.PointLights. Subsequent to an update, it appeared that objects were no longer reflecting the light emitted by these sources.

Ultimately, I resolved the issue by reducing the decay parameter of the lights to a value of 0.01 (previously set at 4).

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

Obtaining Data from an XML Node Using AJAX

Trying to extract statistics from my XML based on a specific name request, but encountering issues with my JavaScript functionality. XML data: <player> <forward><name>Joe</name><stats>45</stats></forward> <f ...

Obtain the parameter of a parent function that runs asynchronously

Here's the code snippet I'm working with: function modify( event, document ) { console.log( "document name", document ); //I need it to be 'file', not 'document'. documents.clients( document, function( clientOfDocument ...

Issue with the loop function

When I try to loop through my code, I keep getting the same "y" value (5) and it doesn't change. What I actually want is to make the ajax call repeat X times [all], passing both the response and the current call number through an anonymous function. A ...

Unveil SQL Limit with a Simple Scroll Load

After successfully laying out and creating my website, the next step is to load more results on scroll. This question has been posed numerous times before, but I am curious if there is a simple solution that can seamlessly integrate into my current setup. ...

Using the Map Function in React JS to Dynamically Render Radio Buttons with Material-UI

Hey everyone, I'm looking for some assistance in replacing the old classic radio button with a new one using material-ui. I've been trying but haven't been successful so far. Any suggestions would be greatly appreciated. Thanks in advance. Y ...

Contrast between PHP and JavaScript output texts

Hey everyone, I'm dealing with a bit of an awkward situation here. I am trying to return a string variable from PHP to JavaScript and use it for a simple comparison in my code. However, the results are not turning out as expected. Initially, I send a ...

When combining React and ReactDOM with browserify, the resulting bundle size exceeds that of react.min.js and react-dom.min.js

I'm currently working through the React beginner's tutorial and things are going smoothly so far. However, I decided to delve into importing external packages and began using tools like npm, browserify, watchify, etc. In the tutorial, there is a ...

What is the best way to activate an @keyframe animation based on the scrolling action?

I am currently working on an @keyframe animation that rotates a circle along its x-axis, starting from 0 degrees to 90 degrees and then back to 0 degrees. My objective is to synchronize the rotation of the circle with the user's scrolling movement on ...

Enhancing Accessibility of the 'Return to Top' Link

Currently, I am designing a web page that requires users to scroll extensively. To enhance the user experience, I have included a back-to-top link at the bottom of the page for easy navigation back to the top. This is the HTML markup I have implemented: ...

Unique issue: Angular encountering a syntax error exclusively in Internet Explorer browser

Encountered an issue with a JavaScript code snippet within my angular project. It throws a syntax error in IE 11, but runs smoothly in Chrome. Interestingly, this particular function is not even called on the initial page load, yet the error persists. Upo ...

Utilizing Vue.js to add functionality for navigation buttons allowing users to move between survey questions

In my Vue.js component, I've written code to show survey questions in a mobile app for users. Here is a snippet of the code: <div class="col-12 p-0" v-for="( i, index ) in questions" :key="i"> <p cl ...

When the condition within the click function is met, concatenate the variable

I'm currently working on a function that involves adding "http://" to the variable 'bar' if it's not already included. This modified 'bar' value will then be sent via ajax to be inserted into the database and also displayed ba ...

Using a numeral within a Font Awesome icon symbol to customize a label for a Google Maps marker

I have a Google Maps marker displayed below, applying a Font Awesome icon as the label/icon. However, I am unsure how to a.) change the color of the marker and b.) include a number inside the marker. Referencing this Stack Overflow post This is the code ...

Tips for updating page content without needing to refresh the page

Have you noticed on Foursquare's website: They have new feeds appearing automatically without the need to refresh the page. I'm working on a backend system to display user specific feeds. How can I achieve the same effect as Foursquare? ...

Having trouble getting your Ajax script to function correctly when submitting a form?

I am currently facing an issue where I am loading a partial page, but I do not want the form on this page to redirect when the save button is clicked. I am unsure if I am using the script correctly. I would like to post to the controller when the submit b ...

Issues with passing Angular directive attributes to the scope were encountered

I am having an issue with my angular directives where the arguments are not being passed into the scope: app.directive('sectionLeft', function() { return { restrict:'E', scope: { sectionContent: '=', s ...

Issues with functionality arise when cloning HTML divs using JQuery

VIDEO I created a feature where clicking a button allows users to duplicate a note div. However, the copied note does not function like the original - it's not draggable and changing the color of the copied note affects the original note's color. ...

Including v-menu in a button causes it to vanish in Vuetify

I am facing an issue with my stepper. Specifically, in step 3, I am trying to add a v-menu to a button but when I do so, the button disappears. Below is the code snippet causing the problem: <template> . . . . <v-stepper-step :complete="e6 > ...

Replicate the functionality of a backend API using AngularJS

Currently, I am in the midst of creating a GUI for an application that is still undergoing API development. Although I have a vision of how it will look, it lacks functionality as of now. Hence, I need to replicate its behavior until the API is fully funct ...

Saga Redux fails to pass parameters during post requests

This is my first time using redux Saga to handle API requests. I have created an async function for a simple post request in the following way: const onLoginRequest = async (userName, password) => await fetch(`${loginApi}`, { method: 'POST', ...