Animating a mesh in three.js with color transitioning using tween.js

I've been struggling to accomplish this task. My goal is to change the color of a ConvexGeometry mesh when hovered over. So far, I can successfully change the mesh's color without any issues.

The problem arises when I attempt to create a smooth transition/interpolation effect from color A to color B. Currently, I am using tween.js but it doesn't seem to work. I'm not sure if the mesh supports material color transitions, or if there is another issue at play...any help would be greatly appreciated.

I have searched for examples of achieving this but could only find this similar approach.

Regardless, here is what I have implemented when hovering over the object:

var tween = new TWEEN.Tween(INTERSECTED.material.materials[0].color)
            .to({r: 0, g: 25, b: 155}, 5000)
            .easing(TWEEN.Easing.Quartic.In)
            .onUpdate(function() {
                INTERSECTED.material.materials[0].color.r = this.r;
                INTERSECTED.material.materials[0].color.g = this.g;
                INTERSECTED.material.materials[0].color.b = this.b;
              }).start()
javascriptthree.jstransitiontweentween.js

Answer №1

Essentially, to make sure your animations run smoothly, you'll need to call tween.update(time) for each animation frame that is requested.

I've made some modifications to an example sourced from threejs.org to help illustrate this concept: http://jsfiddle.net/up1wg1Lo/2/

It's important to note that I have added parameters to both animte and render so that they can keep track of the tick. Additionally, pay attention to the use of tween.update(time) on line 143.

Answer №2

Below is an example of a basic color transition using TweenLite:

var newColor = new THREE.Color('#ff00ff');
TweenLite.to(mesh.material.color, 1, {
  r: newColor.r,
  g: newColor.g,
  b: newColor.b,
});

Answer №3

For optimal performance and complete accuracy, it is recommended to perform the computation step on your tween in every render frame. However, this level of detail is not always necessary for a color tween:

I have had great success using gsap for this purpose:

  var initialColor = new THREE.Color(target.material.color.getHex());
  var targetColor = new THREE.Color(value.color.getHex());

  TweenLite.to(initialColor, 1, {
    r: targetColor.r,
    g: targetColor.g,
    b: targetColor.b,

    onUpdate: function () {
      target.material.color = initialColor;
    }
  });
}

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

Enhance your WordPress menu with additional attributes

Currently, I am implementing a lightweight lightbox script on my WordPress website. My goal is to have one of the main navigation buttons open a Vimeo link in the lightbox. According to the lightbox documentation, I need to "Add the 'data-lity' a ...

javascriptjquerywordpress

Locate a specific value within an array of objects and display it

Data : const areas = [ { "ID":"4131", "RID":"f1438b", "Name":"City" }, { "ID":"6266", "RID":& ...

javascriptreactjs

Sending JSON data containing an IFormFile and a string as parameters to C#

Software Versions: ASP.NET and Web Tools - 17.10.341.11210 C# Tools - 4.10.0-3.24312.19+ JQuery - 3.3.1.js JS - 2.8.3.js Currently, I am attempting to pass an IFormFile and a string from a JSON file select and a string input. After thorough testing, I ha ...

javascriptc#jqueryjson

Guide to retriecing a state in Next.js 14

Check out my code below: "useState" // firebase.js import firebase from "firebase/app"; import "firebase/auth"; // Import the authentication module export default async function handler(req, res) { if (req.method !== " ...

javascriptnext.js

Apologies, we are experiencing a server error. TypeError: Unable to access the 'map' property of an undefined

I'm struggling to grasp the concept of fetching external data using server-side rendering with the getServerSideProps method. In particular, I am facing difficulties with the search functionality and how to handle the returned data. As someone who is ...

javascriptjsonnext.jsfetch-api

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

javascriptjquerycss

What's the best way to apply a margin top to an image using Tailwind CSS?

Is there a way to adjust the top margin of an image in Tailwind CSS? I'm having trouble making my logo clearly visible and think giving it some space at the top might help. How can I do this within the Tailwind CSS framework? https://i.sstatic.net/Ae ...

javascriptcssreactjstailwind-css

Modify the color of the header on Material-UI Date Picker

I recently integrated a Material-UI Date Picker into my React Single Page Application and now I'm facing an issue with changing the header color. I attempted to modify it using the muiTheme palette property, but unfortunately, the header color remains ...

javascripthtmlreactjsdatepickermaterial-ui

Identify Numerous Unique HTML-5 Attributes within a Single Page - Adobe DTM

Is there a way to automatically detect and aggregate multiple custom HTML-5 attributes, such as "data-analytics-exp-name," into a cookie using Adobe DTM without user interaction? These attributes would only need to exist on the page and not require any cli ...

javascriptadobeadobe-analyticstms

Comparison of Static Site Generation (SSG) with Server-Side Rendering and Client-Side Rendering

The lack of concrete information surrounding the inner workings of Client-Side Rendering (CSR), Server-Side Rendering (SSR), and Static Site Generation (SSG) is truly perplexing to me. Despite numerous articles that vaguely touch on these concepts, I have ...

javascriptreactjsnext.jsgatsby

Verifying the execute boolean status or utilizing try/catch with PDO

Apologies for the subpar title. My project heavily relies on AJAX, with most responses returning either 'error' or 'success' messages in an array. In my Javascript code, I display these messages in a custom notification bar. I'm u ...

javascriptpdo

Guide on enabling users to input slide number and URL address to load content using Ajax

Is there a way to customize the number of slides in a slider and choose which content is loaded into each slide using AJAX calls in jQuery? Currently, my slider uses the jQuery .load() method to dynamically load content into each slide when it becomes vis ...

javascriptjqueryajaxslider

When the bounds are adjusted, removing markers in Vue Cookbook's Google Map

I've encountered an issue with clearing markers after updating new bounds on a map. Whenever I post a request with new bounds, new markers get added to the map while the old ones remain in place. This situation becomes quite awkward for me because the ...

javascriptgoogle-mapsvue.js

Repeating every 3 to 6 months on later.js commencing from a specified date

Currently, I am working on setting up recurring events every 3 and 6 months using the later.js library which can be found at https://github.com/bunkat/later. The code implementation looks like this: // Assuming my value.scheduled_date is set to 2018-09-0 ...

javascriptnode.jslaterjs

Observing attribute changes in AngularJS directives

How can AngularJS observe attributes on a custom directive to bind Angular values? Here is my current progress: <tile title="Sleep Duration" data-value="{{sleepHistory.averageSleepTime}}"/> app.directive('tile', [function() { return ...

angularjsangularjs-directivejavascriptjavascript-framework

Tips for inserting a php variable into an html document

I am trying to figure out how to export a variable from a php file into an html file. The php file I'm working with is example.php and it contains the following code: <?php $array= ['one','two']; ?> The html file is named ...

javascriptphphtml

Why Bootstrap 4 collapse feature is not functioning correctly within a ReactJS map component?

I am currently working on a project that requires implementing a collapse feature. The idea is to display all available content when the user clicks the Read More button (which is functioning as intended for collapsing). However, I am facing an issue where ...

javascriptnode.jsreactjsdictionarybootstrap-4

Looking to implement a delay in the model popup using Pure JavaScript

Looking for a method to implement a delay in the popup... I've tried a few solutions without success. What's the secret to adding a delay to the modal below? Any help is greatly appreciated. var modal = document.querySelector(".modal"); var t ...

javascripthtml

An issue encountered with getServerSideProps in NextJS 12 is causing a HttpError stating that cookies are not iterable, leading

Currently, I have an application running smoothly on my localhost. However, when it comes to production, an unexpected error has popped up: Error: HttpError: cookies is not iterable at handleError (/usr/src/.next/server/chunks/6830.js:163:11) at sendReques ...

javascriptreactjsnext.js

Storing a PDF created with Laravel in a queue

I have a tool that converts HTML to PDF and saves it locally. I also use a live URL to fetch another PDF and save it on my local machine. Then, I utilize a Laravel library to merge both PDFs into a single file through embedding. Previously, this process ...

javascriptphplaravellaravel-5