Tween.js - Can you animate a variable using tweens?

Recently, I've been experimenting with three.js and tween.js and I'm curious if it's possible to animate a variable using tweening?

Here are some of my attempts:

1)

tween = new TWEEN.Tween(renderergl.toneMappingExposure).to( "0.001", 1000 ).easing(TWEEN.Easing.Exponential.InOut).onComplete(function() {
// Completed
}).start();

tween = new TWEEN.Tween(renderergl.toneMappingExposure).to( 0.001, 1000 ).easing(TWEEN.Easing.Exponential.InOut).onComplete(function() {
// Completed
}).start();

var toneMap = renderergl.toneMappingExposure;
tween = new TWEEN.Tween(toneMap).to( "0.001", 1000 ).easing(TWEEN.Easing.Exponential.InOut).onComplete(function() { }).start();

Both result in: 

Object prototype may only be an Object or null: 0.001

I'm uncertain if variables can indeed be animated. Could someone provide clarification on this matter?

javascriptthree.jstween.jstweenjs

Answer №1

When using the .to() function, make sure to provide the duration and an object containing the properties and values you wish to modify within the .Tween() object. Here is an example of how your code should look:

tween = new TWEEN.Tween(renderer)
.to( {backgroundOpacity: 0.5}, 2000 )
.easing(TWEEN.Easing.Cubic.InOut)
.start()

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

Storage in private Safari mode is not synced between tabs on mobile devices

In the private mode of mobile Safari, I have successfully stored data in the localStorage. However, when I open my web app in two separate tabs, I notice that the data stored in one tab is not accessible in the other tab. This behavior may be present in ot ...

javascriptangularsafari

Unexplained quirks observed in AngularJS $watch during the initialization of a controller

I am working with a code snippet that utilizes AngularJS: var app = angular.module('Demo', []); app.controller('DemoCtrl', function ($scope) { function notify(newValue, oldValue) { console.log('%s => %s', oldValue, ...

javascriptangularjs

Having trouble configuring webpack for CSS Modules? You may be dealing with an invalid configuration object

Encountering an issue while setting up webpack for CSS Modules... An error message is appearing stating that the configuration object is invalid. It seems that the output path specified as "build" is not an absolute path, which is required. Below are ext ...

javascriptjsonnpmwebpack

Printing the selected value from a drop-down box in HTML with JavaScript

I'm in the process of creating a web page structured like this: <html> <head> <title>Bug UI</title> </head> <body> <script> function myfunc() { //what should I include here?? } </script> <form> ...

javascripthtml

Display/Modify HTML form

Looking for advice on how to create an interactive HTML form that displays data and allows users to edit it by clicking 'Edit' before submitting changes. Any suggestions on how to implement this functionality? ...

javascriptjqueryhtmlwebforms

Function with defer that calls itself repeatedly

I am attempting to utilize a recursive function where each function runs only after the previous one has completed. This is the code I have written: var service = ['users', 'news'], lastSync = { 'users' : ...

javascriptangularjsdeferredangular-promise

Customize form input using Javascript prior to inserting into database

On my Rails form, I have a basic setup like the following: <%= form_for @song do |f| %> <p> <%= f.label :url %><br> <%= f.text_field :url %> </p> <p> <%= f.submit %> </p> <% en ...

javascriptjqueryruby-on-railsruby-on-rails-4

Having trouble with Javascript fetch() not receiving the correct JSON data from the local server

My Django backend is serving JSON data, but I'm encountering some unexpected results. When using curl 127.0.0.1:8000/posts/, the response includes: [ { "title": "This is a title", "body": "Body :)", "pub_da ...

javascriptjsonfetch-api

Switch up the sequence of selected/appended SVGs in D3

In this dot matrix visual example, different colored circles represent funding percentages from three countries: USA, Canada, and Mexico. The gray circles indicate the remaining funding to be raised. The code snippet showcases how the circles are mapped ba ...

javascriptd3.js

Retrieve an array object containing specific properties using axios

Currently, I am retrieving JSON data from an API call using axios and displaying it through Vue. This snippet shows the JSON Object logged in the console: 0: category_id: "categ1" item_name: "item1" price: 100 stock: 155 1: c ...

javascriptvue.jsaxios

Organizing information in local storage using an array and converting it to a string

After storing user inputs (Worker's name, Car Vin, Start time and End time) in the local storage, you want to sort the employees' names in alphabetical order. The question is where should the code be placed and how should it be written? // Car C ...

javascripthtmlarrayssortinglocal-storage

Do Material-UI pickers only validate on blur, not on change events?

When you type inside the DatePicker component, validation is triggered immediately. Is there a way to trigger validation on blur instead of onChange when using @material-ui/pickers with material-ui v4 Passing the value to the blur function should work a ...

javascriptreactjsdatepickermaterial-uionblur

Antialiasing in Three.js is failing to work properly on Google Chrome

When using Chrome v31, I've noticed that antialiasing doesn't seem to be working properly. There are no errors in either browser. Here is the possibly relevant code: var renderer = new THREE.WebGLRenderer( { antialias: true } ); The rendering ...

javascriptgoogle-chromethree.jswebgl

What is the best way to include JSX in a separate HTML file?

Currently developing a PWA using create-react-app. Upon inspecting the index.html page, I realized there are no links to any JS files, leading me to assume that CRA injects JSX into the 'root' div of index.html. Now, my goal is to include an offl ...

javascriptreactjs

Cropped portion of the captcha image located on the left side

edit: I manually adjusted cnv.width = this.width to 120 and it seems to be working. Upon closer inspection, I discovered that the image has both a rendered size and an intrinsic size. The width is 35 for rendered size and 40 for intrinsic size, which may e ...

javascriptseleniumcaptcha

Changing an array in JavaScript within a function

When working with arrays in JavaScript, how can I mutate the value of an array inside a function? I'm aware that certain array methods can achieve this, but regular assignment doesn't seem to work. var arr = [4]; function changeArray(arr) { ...

javascriptarrays

req.body is not defined or contains no data

I am facing an issue with my controllers and routers. bookController.js is functioning perfectly, but when I try to use userControllers for registration and login logic, req.body always appears empty. I tried logging the form data using console.log, but it ...

javascriptnode.jsformsexpress

What is the best way to display nested JSON in JSX within a React Native application?

I need help with rendering nested JSON inside my JSX. Below is the JSON response: [{ "data": { "total_students": 13, "seats": "", "categories": [{ "id": 28, "name": "Economy", "slug": "econom ...

javascriptjsonreact-nativejsx

Audio waves visualization - silence is golden

I am attempting to create a volume meter, using the web audio API to create a pulsation effect with a sound file loaded in an <audio> element. The indicator effect is working well with this code; I am able to track volume changes from the playing aud ...

javascriptjqueryhtml5-audio

Troubleshooting problem with Material-UI and Next.JS in Webpack

I have encountered an error while trying to add the code from this file: https://github.com/mui-org/material-ui/blob/master/examples/nextjs-with-styled-components-typescript/next.config.js When I include the next.config.js code provided below, I receive ...

javascriptmaterial-uinext.js