Search code examples
javascriptthree.jstween.jstweenjs

Tween.js - Is it possible to tween a variable?

So I have been playing with three.js and tween.js and I am wondering if it is possible to tween a variable?

What I've tried:

1)

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

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

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

Both give this result: Object prototype may only be an Object or null: 0.001

I am not even sure if vars can be animated can someone confirm?

Solution

  • In .to() you need to pass duration and an object with properties and their values you want to change in the object of .Tween(). So your code will be like this:

    tween = new TWEEN.Tween(renderergl)
.to( {toneMappingExposure:0.001}, 1000 )
.easing(TWEEN.Easing.Exponential.InOut)
.start()