Troubleshooting three.js problem: Unexpected application malfunction in Chrome due to outdated code incompatible with the latest three.js library

Several weeks ago, my three.js (R48) applications were running smoothly until I encountered issues with Chrome where they no longer work.

Here are the initial error messages I received:

WebGL: INVALID_OPERATION: getAttribLocation: program not linked skyWheel.html:1
8
WebGL: INVALID_OPERATION: getUniformLocation: program not linked skyWheel.html:1
Could not initialise shader
VALIDATE_STATUS: false, gl error [1282] Three.js:355
29
WebGL: INVALID_OPERATION: getUniformLocation: program not linked 

The applications still function properly in Firefox.

To resolve this issue, I decided to update to the latest version of three.js. However, when using the new version in Firefox, I encountered this message and the application failed to work:

[21:50:32.679] TypeError: material is undefined @ file:Three.js:23513

I am seeking assistance from someone who may have experienced similar problems recently and could provide guidance on resolving these issues efficiently.

Answer №1

Consider utilizing the minified version or developer version (three.min.js). This often resolves issues, even if they are using older versions. If not, I switched to using the canvas renderer and removed the spotlight, as well as disabled shadow mapping for the renderer. The issue was originating from THREE.WebglRenderer(). I recommend switching to THREE.CanvasRenderer(), although it may not provide the desired output.. :(

Answer №2

Significant changes have taken place since the release of version 48. For more details, refer to the migration page.

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

Is it possible to execute a URL twice instead of just once in AngularJS?

While developing a web application with AngularJS and Rest Web services, I encountered a problem where the URL is being executed twice instead of just once. I have created a service function for executing the web service API and calling it from the control ...

Loop through a list of items and apply the bootstrap-select plugin to each

In an attempt to incorporate an update button within a loop using bootstrap-selectpicker, I encountered a challenge. Within each iteration of the loop, there is a form containing multiple select elements with selectpicker and a hidden button to save the se ...

What is the method for executing PHP code without the need for users to access the webpage?

Similar Query: Optimal method for running a PHP script on a schedule? I am in need of a solution where a PHP script can consistently fetch data from a single website, store it in a database on the server, and then update multiple other websites. The c ...

Why is my MongoDB $match aggregation query not returning results within a specified date range?

I have been struggling with a MongoDB aggregation query that is not returning any results, just an empty array. It seems like the issue lies in how it's processing the date range. Oddly enough, when I use PriceHourly.find({ date: { $lt: end, $gt: sta ...

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

Issues arise with the functionality of CSS and JavaScript after successfully deploying a Next.js and React project to the server side

I need to deploy my React+Next and Node.js projects on the same port. To achieve this, I converted my TypeScript files to JavaScript and moved the .next folder to the backend side. Now, my API and frontend code are functioning on the same port thanks to Ex ...

Steps to remove OTP from dynamodb after a specified time period (2 minutes)

Recently, I have been utilizing the setImmediate Timeout function to call the deleteOTP function with details such as the userId of the OTP to be deleted. However, I am encountering challenges when passing the argument (userId) to the deleteOTP function ...

Troubleshooting ASP.NET Ajax Error Code 0

Starting from scratch with asp.net and hoping to incorporate infinite scrolling using jQuery Ajax and ASP.NET MVC. Here's the progress so far: <div id="container"></div> <div id="progress" style="display:none"> <h4>Loading ...

Develop a map in JavaScript that uses a parent key to filter data from an object and then stores it in the map

con_data = { "0": { "Actual1920": 2379403, "Budget1920": 10121051.161450788, "CostOwner": "Dr. Ratnavat", "LTRevExp": "Expense-EB", "LedgerBudget": "Salary", "LedgereType": "Salary-Teaching", ...

In Node.js and Express, it is important to note that a variable must be declared before

When I use the express action get('items'), I encounter an issue while trying to call an external JSON-API and display the API response in my local response. The error that I am currently facing states that the items variable is not defined with ...

Issue with firing Facebook pixel after router.push() in Next.js

Within this code block is FB pixel tracking code <Script id="some-id" strategy="afterInteractive">some fb pixel code</Script> The issue arises when navigating to a page containing the script using router.push(SOME_ROUTE). T ...

"Patience is key as we await the resolution of a promise within the confines of an emitter

My goal is to wait for the promise to be resolved before continuing when the someevent event is fired. However, even though I use a then in my code snippet below, it seems that the process shuts down before the slowFunctionThatReturnsPromise is resolved, ...

Unable to eliminate user registration feature with Meteor and React

Exploring the world of Meteor and diving deep into its functionalities, I am currently focused on creating a user login and signup page with personalized control panels for each registered user. Although I have successfully implemented the signup and logi ...

Troubleshooting: Issue with running npm start | React app not loading

npm start command seems to be stuck at this particular point - https://i.sstatic.net/5NUVF.png The application is failing to load because of this issue. Here is the content of package.json file - { "name": "reacttest", "vers ...

Is there a way to obtain the tasklist result of exec() from child_process and convert it to JSON format?

When I use the tasklist command with child_process, the stdout returns processes in Unicode string format that is not easily queryable. Here is the code snippet: var exec = require('child_process').exec; ... exec('tasklist', function( ...

Creating a Like button using react.js

How can I make only the selected button change, instead of all at the same time when clicked? I have implemented a function that includes a Boolean state and toggles it const [like, setLike] = useState(false); const handleLike=()=> { setLike(! ...

How can I adjust the size of the renderer in Three.js to fit the screen?

Encountering issues with the code snippet below: //WebGL renderer renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); //TODO: set optimal size document.body.appendChild(renderer ...

Route in Node.js for event binding

Currently, I am using expressjs in combination with nowjs and binding some events to the now object directly within the route when it is accessed. However, this approach feels messy and I am concerned that every time the route is accessed, the events are e ...

Is it possible to trigger an ajaxcall once another one has finished executing?

Just curious, do you think the code snippet below is capable of triggering a second ajax function once the first one has completed successfully? if(xmlHttp) // xmlHttp represents an XMLHttpRequest object { xmlHttp.onreadystatechange = function() ...

A guide on triggering a function when a button is clicked in reactjs

Can anyone please help me with this issue I'm having: how do I execute a function when a button is clicked? I currently have the following code but it's not working export var Modulo = React.createClass({ prom1: function () { retur ...