Interpolation/Tween/Animation suggestions

[yyynnn]

trafficstars

Hi!

What is the best way to interpolate/tween mesh/scene/material properties in react-three-renderer between states? Maybe someone had already done it?

[nickpolet]

I have used tween.js for tweening in r3r before, calling setState to update the state of the scene.

var TWEEN = require('tween.js');
let self = this;

var coords = { x: 0, y: 0 };
var tween = new TWEEN.Tween(coords)
.to({ x: 100, y: 100 }, 1000)
.onUpdate(function() {
	self.setState({
               x:this.x,
               y:this.y
           });
})
.start();

Then updating the tween engine with

this._onAnimate = () => {
    TWEEN.update();
    // Update anything else in the animation loop
};

I'm about to implement some tweening myself, so I will get back to you if I succeed or not. The above method was used quite a while ago, hopefully it still works.

[yyynnn]

@nickpolet yes, i ended up using TWEEN too. But that seems too messy. And i can not get how to tween the states on store change

[toxicFork]

I was working on a module to do this as well, I'll try to dig it up and write my notes on it here :)