three.js анимирует сетку с переходом цвета (tween.js)

Я схожу с ума, пытаясь добиться этого. Я хочу изменить цвет сетки (ConvexGeometry) при наведении курсора, пока здесь я не могу сделать это без проблем, я могу изменить цвет сетки.

Проблема возникает, когда я хочу сделать это с переходом/интерполяцией цвета от a к b, прямо сейчас я использую tween.js, но он не работает. Я не знаю, поддерживает ли сетка переход цвета материала, или проблема в другом... Буду признателен за любую помощь в этом.

Я не могу найти ни одного примера этого... только этот аналогичный подход.

В любом случае, когда я зависал над объектом, я делаю следующее:

var tween = new TWEEN.Tween(INTERSECTED.material.materials[0].color)
            .to({r: 0, g: 25, b: 155}, 5000)
            .easing(TWEEN.Easing.Quartic.In)
            .onUpdate(function() {
                INTERSECTED.material.materials[0].color.r = this.r;
                INTERSECTED.material.materials[0].color.g = this.g;
                INTERSECTED.material.materials[0].color.b = this.b;
              }).start()

javascript transition three.js tween tween.js
person elverde    schedule 19.03.2014    source источник
comment
Ты слишком усердствуешь. Попробуйте var tween = new TWEEN.Tween( color ).to( { r: 0, g: 0.1, b: 0.45 }, 5000 ).start();   -  person WestLangley    schedule 19.03.2014

Ответы (3)


arrow_upward
3
arrow_downward

В основном вам нужно сделать tween.update(time) для каждого запрошенного кадра анимации.

Я изменил пример с сайта threejs.org, чтобы продемонстрировать это: http://jsfiddle.net/up1wg1Lo/2/< /а>

Обратите внимание, что я добавляю параметр к animte и render, чтобы они могли знать тик. Также обратите внимание на использование tween.update(time) в строке 143.

person John    schedule 28.01.2015
comment
Какой бы замечательной она ни была при всей своей сложности, эта анимация космического мусора имеет слишком много деталей, чтобы визуально продемонстрировать анимацию цвета, а также необходимые принципы кода... - person matanster; 08.07.2017

arrow_upward
0
arrow_downward

Если вы хотите оптимизировать производительность и быть на 100 % точным, вы должны выполнять этап вычисления анимации движения в каждом кадре рендеринга, но на самом деле это не обязательно делать для анимации цвета:

Это использование gsap, которое меня никогда не подводило:

  var initial = new THREE.Color(target.material.color.getHex());
  var value = new THREE.Color(value.color.getHex());

  TweenLite.to(initial, 1, {
    r: value.r,
    g: value.g,
    b: value.b,

    onUpdate: function () {
      target.material.color = initial;
    }
  });
}
person yeahdixon    schedule 07.03.2018

arrow_upward
0
arrow_downward

Простая анимация цвета с использованием TweenLite:

var col = new THREE.Color('#ff00ff');
TweenLite.to(mesh.material.color, 1, {
  r: col.r,
  g: col.g,
  b: col.b,
});
person Felix Turner    schedule 22.05.2018