Issue with Three.js: Values in Uniforms not being updated

I'm currently working on animating the uniforms value of a shader using Tween.js when a button is clicked. The code snippet below shows my implementation:

Shader.uniforms.threshold.needsUpdate = true;

function fadeIn() {
  new TWEEN.Tween( Shader.uniforms.threshold )
  .to( { value : 0.6 }, 100 )
  .start();
}

function fadeOut() {
  new TWEEN.Tween( Shader.uniforms.threshold )
  .to( { value : 2 }, 100 )
  .start();
}

document.getElementById("FadeIn").onclick = function() {
   fadeIn();
}

document.getElementById("FadeOut").onclick = function() {
   fadeOut();
}

However, I am facing an issue where the code does not work as expected. Upon refreshing the page, the value changes but clicking the button does not have any effect. I am seeking assistance in identifying the error in my approach. Is Tween.js the appropriate way to achieve this or is there a better alternative? Thank you.

Answer №1

After some trial and error, I was able to fix the issue by adjusting the value of the "Shader" directly. It appears that modifying the uniforms value of individual objects is the key. Rather than using Shader.uniforms.threshold, I opted for the following approach:

myObject.material.uniforms.threshold
, and it resolved the problem.

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

The Angular template driven forms are flagging as invalid despite the regExp being a match

My input looks like this: <div class="form-group"> <label for="power">Hero Power</label> <input [(ngModel)]="model.powerNumber" name="powerNumber" type="text" class="form-control" pattern="^[0-9]+$"id= ...

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

Creating a Popup with JS, JQuery, CSS, and HTML

Seeking assistance in creating an HTML, CSS, and JS/jQuery popup. Looking to have a button that reveals a div tag when clicked, which can also be closed. Any quick responses with solutions would be greatly appreciated. Thank you in advance! ...

The shared global variable or store feature is currently not functioning as expected in Vue JS

Currently, I am in the process of developing a Simple Web application using Vue JS for educational purposes. Although I am new to Vue JS and still learning the ropes, I have encountered an issue with sharing a state variable across all components. In my a ...

Error on Network: 400 BAD REQUEST in Ionic framework

I recently implemented push notifications successfully, but I am facing a network error with a 400 bad request when trying to access a specific API endpoint. The error message states: "NetworkError: 400 BAD REQUEST - https://apps.ionic.io/api/v1/app/77c3 ...

JavaScript function for converting timestamp to readable date

Can someone help me transform the timestamp 1382086394000 into a readable date format 2013-10-18 08:53:14 by using a JavaScript function? The current function I have is: function cleanDate(d) {return new Date(+d.replace(/\/Date\((\d+)\ ...

Can hash routes be defined in next.js?

Previously, I created a modal component using <HashRouter> in react-router where the modal would become active or inactive based on the hash url. For example, the modal is inactive when the url is /route, but becomes active when the url is /route#m ...

Disabling Commands using Discord JS Commando in a guild

Curious about something. Will Discord JS Commando disable a command only within a specific server (guild) or globally across all servers? ...

Is it more efficient to perform data sorting on the client side or the server side?

My current task involves fetching data from a server and showcasing it through GWT on the client side. The use of GWT is flexible - it can be swapped out for Ajax calls or transformed into a standalone application rather than just a web app. One dilemma ...

How can we extract validation data from a function using Ajax and then transfer that information to another Ajax query?

I have an AJAX function that validates a textbox on my page. After validating, I need to perform an action with that value (search in the database and display results in the textbox). However, I also need the validation function for another separate functi ...

The property of Three.js Quaternion is immutable and cannot be reassigned

I'm attempting to develop a class (using three.js) that utilizes an array containing vector names to compare with an array containing a set of 3D vectors in order to generate a mesh of a flat face. However, I am encountering an error. Uncaught TypeEr ...

Unable to retrieve the user ID from a Discord username using Discord JS

let string = `${args[1]} ${args[2]}` console.log(string) const idofuser = client.users.cache.find((u) => u.username === `${string}`).id I am facing an issue with DiscordJS where it says "cannot read property 'id' of undefined" when trying to ...

"Have you ever wondered how the router object in express.js is seamlessly integrated with app.use(), considering that it only accepts

I am curious about the process of how the router object in express.js is passed to app.use(), which typically only accepts callbacks. Since router is an object of express, I am trying to understand why app.use() does not throw an error even though it req ...

Tips for resolving jQuery conflict problems

I am dealing with a jQuery issue where I have two scripts - one for the slider and the other for a dropdown menu. When I remove one script, the slider works but the dropdown doesn't, and vice versa. I have looked at tutorials online on how to resolve ...

Issue encountered with create-next-app during server launch

Encountering an error when attempting to boot immediately after using create-next-app. Opted for typescript with eslint, but still facing issues. Attempted without typescript, updated create-next-app, and reinstalled dependencies - unfortunately, the prob ...

Navigating through a series of items in VueJS can be easily accomplished by using a

Below is the Vue instance I have created: new Vue({ el: '#app', data: { showPerson: true, persons: [ {id: 1, name: 'Alice'}, {id: 2, name: 'Barbara'}, {id: 3, name: &a ...

Incorporating dynamic data binding using AngularJS in a span tag

In my view, I am using this Angular expression: <span ng-if="{{list.StoreList ? (list.StoreList.length ' Products)' : '(0 Products)'}}"> </span> The purpose is to display the count of items in StoreList if there are any, ...

Efficiently transferring data in segments within an HTML table using jQuery

My HTML code looks like this: <table id="library_info_tbl"> <thead> <th>Call No.</th> <th>Book</th> <th>Accession No.</th> <th>Status</th> </thead> <tbody& ...

Experiencing duplicate execution of $onChanges in AngularJS version 1.6

I might be overthinking this, but that's why I'm seeking help. :) Note: In the example below, the controller alias for the component is "ctrl". var ctrl = this; Imagine we have a component with two bindings, one of which is optional: bindings: ...

Transferring the control's identifier to JavaScript using ScriptControlDescriptor

In my CreateChildControls() method, I am creating a control: HtmlGenericControl mycontrol= HtmlGenericControl("li"); mycontrol.ID = "controlID"; controlId = mycontrol.ID; protected virtual IEnumerable<ScriptDescriptor> GetScriptDescriptors() { ...