The error message "Uncaught TypeError: Cannot read property 'getUniforms' of undefined" is thrown from the ThreeJS r82 Custom Shader in the three.min.js file at line

I've been working on setting up a js fiddle to showcase an issue I'm currently tackling with a custom shader. After linking it to three.min.js for r82, I encountered some runtime errors during rendering. Interestingly, this problem was absent when using r81 or when my code was split across different classes and js files. The error message is not very informative - only mentioning a problem with the getUniforms function, which leads me to believe that something may be undefined, but I can't pinpoint the missing piece.

You can view the js fiddle here: jsFiddle

function init()
{
    this.textures = {};
  this.loaded = 0;
  loadAssets();
}

function loadAssets()
{
    var loader = new THREE.TextureLoader();

  // Loading asset URLs...

}

// More functions and code snippets follow...

Above is the JavaScript code snippet provided.

If you have any insights into solving this issue, your help would be greatly appreciated.

Feel free to ask if more information is required. I'm struggling to identify what might be causing the issue with my custom shader.

Thank you,

Rhys

javascript3dthree.js

Answer №1

After some investigation, I discovered my error - instead of assigning the material as intended, I was mistakenly assigning the shader. Here is the corrected line of code:

mesh.material = planeMaterial;

The correct line should have been:

mesh.material = planeMaterial.material;

An oversight on my part, apologies for any confusion caused. Thank you.

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 many files are being monitored by Grunt?

Recently, I received a new project using Angular + Node from a client and successfully set it up on my local machine. However, one major issue arose when running the grunt command - my CPU spiked to 100% causing my system to hang. Strangely, the same proje ...

javascriptangularjsnode.jsgruntjs

Exploring ways to compare and update values in an array of objects using JavaScript

I have a situation where I need to compare the names and values of two arrays filled with objects. const array1 = [ { name: 'Sarah', value: null }, { name: 'Michael', value: null } ] const array2 = [ { na ...

javascriptarrays

Is Angular capable of displaying a date within a specific timeframe using ng-show?

So I have a button that, when clicked, displays a list of data. I am adding a unique font awesome icon in there if the JSON key value exists. However, here lies the issue. The particular key happens to be a date. I need my ng-show function to check whether ...

javascriptangularjsjsonfont-awesome

selecting a div element with a label using the nth-child property

I recently discovered the CSS3 :nth-child() Selector and decided to create a sample Here is the HTML snippet: <body> <div> <label>dsdf</label></div> <div>seconddiv</div> </body> And here's the CSS par ...

javascriptjqueryhtmlcss

Error message: Unable to instantiate THREE.Spherical with OrbitalControls

While attempting to implement OrbitalControls.js in my Electron app, I encountered an issue related to the Spherical constructor. Uncaught TypeError: THREE.Spherical is not a constructor I am unable to locate a Sphereical.js file to resolve this error. C ...

javascriptthree.js

What is the best way to make an input text the focus when an item on a dropdown menu is clicked?

I have a website with a dropdown menu and an input box. I want the user experience to be more seamless by automatically focusing the mouse cursor inside the input box when they click on an option in the dropdown menu. This way, users can start typing right ...

javascriptjqueryhtmlcss

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

My goal is to develop a Single Page Application using Vue3 and the Bootstrap 5 framework with a simple layout of Header -> Content -> Footer. I want the Content section to fill the space between the header and footer, ensuring there is no overlap. Ho ...

javascripthtmlcssvuejs3bootstrap-5

Issue with recurring Window Alerts in Google Apps Script

I'm currently facing an issue with an alert appearing multiple times whenever a function is executed within a Google Apps Script written for a spreadsheet. I believe I've identified the root cause of the problem, but I'm uncertain about the ...

javascriptgoogle-apps-scriptgoogle-sheets

Guide to verifying all chosen options in a multiple select field using EJS

I am looking for the most effective way to check all selected options in my select dropdown when data is being edited. Here is an example of my select dropdown that supports multiple selections: <select name="tags[]" class="multi-select" multiple="" i ...

javascriptexpresstemplate-engineejs

Enhance the appearance of a bokeh plot with real-time updates using

My question is similar to the one found at this link. I have a website that includes various elements, such as a table and a bokeh plot. I want to update these elements based on user input. While I have figured out how to update the table, I am struggling ...

javascriptpythonajaxflaskbokeh

Ways to identify if a JavaScript file has already been packed

Hello everyone! I'm currently working on a Windows application using C# that minifies CSS files and packs JS files in bulk. I've come across a challenge where if the user selects a JS file that has already been packed, it will actually increase t ...

c#.netjavascript

A guide on displaying an array object in a table column using Vue.js and Element UI

Having issues with rendering array data in Vue Js Element UI using the el-table-column element. The string data displays correctly, but I'm facing problems with the array data. I've attempted to include static data within the data() return method ...

javascriptarraysvue.jsvue-componentelement-ui

Error encountered on page load due to undefined variable thrown by the Express-validator validation process

In the process of constructing a contact form and incorporating express-validator for validation, I am currently focused on error handling. Below is a snippet of the code from my app.js file that pertains to this matter: // CREATE (POST) ROUTE - add new p ...

javascriptexpressejsexpress-validator

Steps for deactivating a button based on the list's size

I am trying to implement a feature where the user can select only one tag. Once the user has added a tag to the list, I want the button to be disabled. My approach was to disable the button if the length of the list is greater than 0, but it doesn't s ...

javascripthtmlangulartypescriptionic4

Vue js: Automatically assign alternate text to images that are not found

Currently, I am in the process of developing a website that features a variety of products, each with its own unique image. For binding the image URL to the source attribute, I use the following code snippet: <img :src="product.ImageUrl"/> In case ...

javascriptvue.jsvuejs2

Prevent automatic scrolling of a div in jQuery while it is being hovered over

After addressing a previous question, I have further refined the script but encountered an issue at the final step. The current functionality involves a div automatically scrolling 50px at a time until it reaches the bottom, then it scrolls back to the to ...

javascriptjquery

Locate the positions of 2 identification numbers within a Mongoose array

I am currently working on developing a middleware that validates if a conversation exists between two users in the database. If the conversation does not exist, the middleware will create a new conversation. I am attempting to utilize Mongoose's $in o ...

javascriptnode.jsmongodbmongoose

What is the best way to find the maximum and minimum values within a JSON object that is populated from user inputs using only JavaScript?

Here is a simple form that stores data at the following link: https://jsfiddle.net/andresmcio/vLp84acv/ var _newStudent = { "code": code, "names": names, "grade": grades, }; I'm struggling to retrieve the highest and lowe ...

javascriptjson

Can dynamic CSS imports be unloaded in a React application?

I am facing an issue with loading two files using react.lazy and suspense: import React, { Suspense, lazy } from "react"; import { Route, Redirect } from 'react-router-dom'; const MainLayout = lazy(() => import('Components/Layout/MainL ...

javascriptcssreactjs

The getInitialProps function in Next.js React components does not automatically bind props

When building applications with Next.js, you have the opportunity to leverage a server-side rendering lifecycle method within your React components upon initial loading. I recently attempted to implement this feature following instructions from ZEIT' ...

javascriptreactjsnext.js