Mouseover / mouseout上Three.js多维数据集上的Tween.js动画

Question

我是Three.js和Tween.js的新手，创建动画时遇到了一些麻烦。

我已经创建了9个多维数据集，我希望它们在鼠标悬停时可以平滑缩放并同时更改背景颜色。

Here's the demo of what I've done so far

我已经做到了，但是我的补间动画只能运行一次，并且只能在鼠标悬停时使用，而不能在鼠标悬停时使用。

此外，我知道我的代码很长，可以使用for循环创建多维数据集，但是我无法使其正常工作...

所以我的问题是：如何使补间动画在鼠标悬停和鼠标移出时循环播放？另外，有什么技巧可以减少这段代码？

var tween = new TWEEN.Tween(col).to(col2, 500).onUpdate(function() {
    renderer.setClearColor(col);
    });

    var tween2 = new TWEEN.Tween(col2).to(col, 500).onUpdate(function() {
        renderer.setClearColor(col);
    });

    mesh.on('mouseover', function(ev) {
            mesh.scale.y *= scale;
            tween.start();
    });

    mesh.on('mouseout', function(ev) {
        mesh.scale.y *= unscale;
        tween2.start();
    });