Transitioning colors in the renderer using ThreeJS and GSAP

I'm attempting a basic color transition using gsap to modify the renderer's background color.

The issue arises when trying to transition from white to black – it simply changes the color abruptly without any fade effect. Conversely, transitioning from black to white works flawlessly.

Here is the code snippet for transitioning from black to white:

gsap.to(renderer, {setClearColor: 'rgba(255,255,255,1)', duration: 2});

Now, here are the attempts at transitioning from white to black (tried various color inputs such as hex, rgb, rgba, with and without new THREE.Color):

gsap.fromTo(renderer, {setClearColor: new THREE.Color('#ffffff')}, {setClearColor:new THREE.Color('#000000'), duration: 2});

Additionally:

gsap.to(renderer, {setClearColor: 'rgba(0,0,0,1)', duration: 2});

It seems like the value is being cached as rgb(0,0,0), resulting in a transition from rgb(0,0,0) to rgb(0,0,0).

javascriptcssanimationthree.jsgsap

Answer №1

Forget about it, figured it out.

If you happen to stumble upon this particular (haha) issue, here's the solution:

It appears that renderer.clearcolor and scene.background range from 0 to 1 in RGB format, so:

gsap.to(scene.background,{ r:1, g:1, b:1, duration: 2 })

and

gsap.to(scene.background,{ r:0, g:0, b:0, duration: 2 })

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

Get the image from the express route

Currently, I am running an express server with the following route: exports.getUserFile = function (req, resp) { let filePath = path.join(__dirname, 'storage', req.params.fileName); resp.download(filePath); }); } Within my web app ...

javascriptnode.jshtmlrestexpress

What is the best method for arranging drop-down menu options in alphabetical order?

Is there a way to organize the options alphabetically in the dropdown menu of Material-UI? I understand that arrays can be sorted easily using arr.sort(). However, when I try const options = [...].sort(), I still see unsorted values in the dropdown menu. ...

javascriptreactjsmaterial-ui

Pass the callback function `cb_func` as a parameter to the `foobar` function when calling it in the `onclick`

I have an element that I want to trigger an onclick event with a callback function. Here is the code snippet: function cb_func() { alert("hello world!"); } function foobar(i, cb) { // do something if (cb != undefined) cb(); } onclic ...

javascriptjqueryhtml

Retrieve the current day's value from an array

I have a list of days with corresponding opening and closing hours, now I need to find the operating hours for today. For instance, if it's Friday, then the current hours should be "11:30 AM – 9:30 PM". How can I achieve this using JavaScript? ["Mo ...

javascript

Avoid adding any empty entries to the list using jQuery

I have implemented a code to prevent any blank entries from being added to my list, and it seems to be working fine. However, I can't shake the feeling that there might be a better way to achieve this. Even though it functions correctly, it doesn&apos ...

javascriptjquery

What is the best way to secure the installation of python packages for long-term use while executing my code within a python shell on NodeJS?

I have been encountering difficulties while attempting to install modules such as cv2 and numpy. Although I have come across a few solutions, each time the shell is used the installation process occurs again, resulting in increased response times. Below i ...

javascriptpythonnode.jsexpressweb-development-server

Showing a group of users in real-time as they connect using Socket IO

I've been working on setting up a system in Socket IO to create a list of individuals who join a 'party room'. The plan is to lock the party room once all players are present, and then display views to users. However, I've hit a roadblo ...

javascriptjqueryarraysnode.jssockets

Executing the JavaScript function on a batch of 6 IDs at once (should return every 6 calls?)

I'm curious if there's a function available that can group called data into sets of 6. Here's the expanded version of the code var currentResults; function init() { getProducts(); } function getProducts() { $.ajax({ url:" ...

javascriptjqueryajaxdom

The EJS file is failing to display the stylesheet even though it is being pulled from the

Encountering a strange issue where the page routed to display additional information about a specific record from my database list on the homepage is not loading the stylesheets located in my partial/head, despite successfully passing the object informatio ...

javascriptnode.jsexpressejs

Start a timer in CodeIgniter when a button is clicked and show the time elapsed

Just a heads up: I am currently in the learning process. While I have some experience with PHP, my knowledge of Java is very limited or non-existent. In the past, I've received negative feedback due to this lack of experience. So, here I am giving it ...

javascriptcodeigniterif-statementtimer

Mastering the art of utilizing sequelize and promises effectively

I'm currently learning how to create apps using expressJS and Sequelize. I could really use some help as I'm more accustomed to sequential programming. My project involves two models: Todo (id, title) and TodoItem (id, content, complete, todoId). ...

javascriptnode.jsexpresspromisesequelize.js

No response from jQuery's $.getJSON() function

I'm currently experimenting with jQuery by using a script that I wrote. As a beginner in learning jQuery, I am trying to read data from a .json file and display it in a div. function jQuerytest() { $.getJSON( "books/testbook/pageIndex.json", func ...

javascriptjqueryhtmljson

An unusual problem stemming from jQuery/AJAX arises when variables within a function fail to update while a click

I've been struggling with a small issue for the past three days that I just can't seem to resolve. It doesn't seem to be a coding error, but rather a misunderstanding of variables and why the onClick event isn't functioning properly. H ...

javascriptjqueryajax

What is the significance of both escaped and unescaped values within the ejs templating engine?

When using <%= in the template, it outputs the value in HTML escaped format. On the other hand, when using <%-, it outputs the unescaped value in the template. Could you please explain the difference between 'escaped' and 'unescaped&a ...

javascriptnode.jsejs

Numerous entities in motion, each adorned with its own accompanying text

I have been experimenting with the interactive cubes and recently implemented a click function that directs to specific links. Now, I am interested in assigning distinct text to each cube as a material when rendered. Currently, I am using a single materi ...

javascriptthree.js

Guide to rearranging the sequence of items in a selected jQuery collection

I have created a JavaScript filter that targets elements with the class .single: There are numerous divs with the class .single, each containing multiple text elements. The filter has already been set up to hide all .single elements that do not contain an ...

javascriptjquerysortingfilterset

Displaying multi-dimensional arrays through the console in JavaScript and showcasing their elements

My array is supposed to have 140 indexes in a single format like this: array:[0-140] //however, it currently appears as: array: [ 0: [0-99], 1: [100-140] ] I've confirmed multiple times that it is just one array of objects. Why is it s ...

javascriptarraysangularjs

Issues have been identified with React Native UI components RCTBubblingEventBlock and RCTDirectEventBlock not functioning as expected

In my custom native view within an Ignite project, I am facing a challenge with setting up communication from Objective-C to React Native. While the communication from React Native to iOS works using HTML injection, the reverse direction is not functioning ...

javascriptiosobjective-creactjsreact-native

Equal gutters are present between CSS floats

After conducting various experiments, I have devised a method to incorporate fixed and equal gutters between floats. My approach involves using positive and negative margins as well as multiple wrappers, making the solution somewhat cumbersome. However, I ...

htmlcsscss-floatmargin

Is Eslint functioning in just one Sublime Text project?

I have encountered an issue where I duplicated the .eslintrc and package.json files for two projects, but only the first project is able to run linting properly. The second project does not show any errors. I am using sublime-linter with the eslint modul ...

javascriptbabeljseslint