Challenges with displaying a scene in certain browsers using Three JS version 71

In my three.js v71 project, I am experimenting with adding a meshphong material and displaying it on the screen once material caps are added. Surprisingly, everything works perfectly when I render it on Chrome version 42.0 (Linux). However, when I attempt to run the same code on Chrome v42.0 in other operating systems, I encounter errors.

When running on Chrome: Uncaught TypeError: Cannot read property 'length' of undefined

And while testing it on Firefox Developer Edition (v39) and Firefox Stable Edition (v37), I get an error message stating:

TypeError: a.defaultAttributeValues[h] is undefined

I suspect that these errors might be due to synchronization issues within the JavaScript code, such as assigning properties to an undefined object. It's puzzling how the rendering works flawlessly on the Linux browser but encounters problems on other platforms.

Answer №1

I managed to resolve the issue by making a slight modification to the three.js library code.

Specifically, in line 20263 of three.js (v71), I made sure to include the [key] in the if condition.

} else if ( material.defaultAttributeValues[ key ] !== undefined ) {

Similarly, in line 443 of three.min.js (v71), I added the key [h] to the if condition.

0!==a.defaultAttributeValues[h]

This adjustment successfully resolved the problem, allowing the object to render correctly in all browsers.

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

Tips for achieving a background animation similar to the one shown on this page

Check out this link: danielcoding.me/resume/#contact I am interested in this animation: screenshot I tried inspecting element on the page, but couldn't find any background images. How can I create this animation? Is it achieved through JavaScript or ...

Retrieve Textures From an Assortment

Greetings to all the readers here! I am in the process of developing a website where I want to implement a feature that allows me to scroll through "cards" arranged in a single line, visible from an isometric side view. I have managed to set up the scene ...

Unexpectedly, Internet Explorer 11 is causing the "input" event to fire prematurely

While troubleshooting a JavaScript issue, I came across what seems to be a bug in Internet Explorer 11. I am reaching out here on StackOverflow for validation and to see if anyone else using IE11 can replicate this problem. The problem arises when the val ...

Why won't the dynamic button trigger the JavaScript function?

I've been adding a button dynamically to my page using the following code snippet. if (adminInd =='X'){ var adminDiv = $( '<label id=Delegatelbl>Miscellaneous label prototyping.:</label>'+ '& ...

Selecting specific elements from an array in JavaScript can be achieved by using various methods and techniques

Currently working on a quiz incentive system where users earn rewards based on the number of correct answers they input. The example array below shows the possible range of correct answers: var rightAnswers = ['a', 'b', 'c' ...

The elements within the array have not been defined

Why is the results array showing as undefined? I am having trouble displaying the objects inside the results array. I have attempted to do so with console.log(data.results[0].bodyColor) but encountered an error. When I try accessing (data.results), it ret ...

I keep encountering an Uncaught TypeError when trying to read the property 'options' of null, despite having the element ID properly defined

I am a newcomer to the world of Javascript and HTML. Despite having the element defined in HTML, I am encountering an exception. Could someone please offer assistance? My goal is to create a shape (initially a circle) based on user input such as shape type ...

Looking for assistance with increasing the output size in JavaScript

As a beginner in JavaScript, I managed to create a form with a textarea and a button to display the text from the textarea in a div tag. Additionally, I added two buttons that are meant to increase the size of the text in the div tag when clicked, as wel ...

Angular Typescript filter function returning an empty arrayIn an Angular project, a

I have a filtering function in Angular that is returning an empty array. Despite trying similar solutions from previous questions, the issue persists. The function itself appears to be correct. Any assistance would be greatly appreciated. gifts represents ...

Implementing clickable actions to add new entries in a React.js application (using Redux toolkit)

I am currently working on my PET project using Redux toolkit and encountering some issues with inputs. When I add an input on click, it gets added correctly, but I am unsure if it is being added in the right place (it should be added in the ITEMS array). A ...

Can anyone please guide me on how to extract the IP address of a specific individual using Node.js?

There's an individual running some kind of exploit scanner on my server. I'm receiving strange requests like: IP ADDRESS: ::ffff:127.0.0.1 www-0 (out): POST /cgi-bin/php5?%2D%64+%61%6C%6C%6F%77%5F%75%72%6C%5F%69%6E%63%6C%75%64%65%3D%6F%6E+%2D%64 ...

What is the best way to access the Node.js HelloWorld File that I created with a .js extension?

I am currently going through the materials at "NodeBeginner.org". Despite my limited experience with command line, I am struggling to execute my first file. The only success I've had so far is running "console.log('helloworld');" by typing ...

Inserting items into an array entity

I am attempting to insert objects into an existing array only if a certain condition is met. Let me share the code snippet with you: RequestObj = [{ "parent1": { "ob1": value, "ob2": { "key1": value, "key2": va ...

Filtering the array of objects in the Vuex state resulted in an empty array being

I am working with a state that fetches data from https://jsonplaceholder.typicode.com/todos/. My goal is to filter this data based on the status completed:true or completed:false. Below is the method I am using to filter the array: filterByStatus(status ...

Issue arises when attempting to transfer data collection object from Jquery ajax Method to MVC Controller resulting in null object being displayed

I am attempting to pass a data object to an MVC controller using a jQuery method. When I click the submit button, a data object is created in a JavaScript method. The data object is not null in the Ajax method. However, when I try to pass it to the MVC con ...

Sort values depending on the value of another key

I have a list of different types: const types = ['BAKERY', 'FRUITS', 'RESTAURANT', ...]; The length of this array is not fixed. Additionally, I also have a corresponding category list for each type as shown below: const categ ...

When the ng-model is updated within a promise's .then() function, the ng-change

I've encountered an issue with ng-change in a select not triggering when I update the ng-model parameter within my promise.then function. Here's my select code: <select ng-model="currentReport" ng-options="rpt.ReportDisp for rpt in availa ...

Simpler and more sustainable methods for embedding HTML elements using a configuration file

Currently, I am devoting my time to a toy project that heavily relies on JavaScript. A key component of this project is a JSON file that contains configurations and input descriptions, along with range values and options. This JSON file enables me to easil ...

Security Measures for Parsing Arrays using eval() Function

When I receive a string of an array containing objects via an http request, I use eval() to parse it. Since I am expecting an array object after parsing, how can I secure this eval() process beyond using if (Array.isArray(parsedObj)) ... Is there a bette ...

In JavaScript, ensure to directly use the value of a variable when defining an asynchronous function, rather than by reference

Hello there, Let me paint you a picture: for (j = 0; j < btnArr.length; j++) { var btn = document.createElement("button"); btn.addEventListener("click", function() { press(this, j) }, false); div.appendChild(btn); } The issue at hand is t ...