Анимация Tween.js на кубах Three.js при наведении мыши - PullRequest
Новая
       83

Анимация Tween.js на кубах Three.js при наведении мыши

0 голосов
/ 10 января 2019

Я новичок в Three.js и Tween.js, и у меня возникли некоторые проблемы при создании анимации.

Я создал 9 кубов и хочу, чтобы они плавно масштабировались при наведении мыши и одновременно меняли цвет фона.

Вот демонстрация того, что я сделал до сих пор

Мне удалось это сделать, но моя анимация движения работает только один раз и только при наведении курсора мыши, а не при наведении мыши.

Кроме того, я знаю, что мой код очень длинный и что я мог бы использовать цикл 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();
    });
...