Анимированные текстуры с трем волокнами

Question

Я использую пакет трехсторонний аниматор для анимированных текстур, которые будут отображаться в моем me sh. Я использую реагирующее три волокна вместо простых трех. js и по какой-то причине он загружает текстуру, но не анимирует ее. Вот моя Песочница , чтобы показать, что я имею в виду. Я даже попытался не использовать useLoader и скопировал пример, приведенный в документации:

const texturePath = 'https://i.imgur.com/Oj6RJV9.png';
const animator = new PlainAnimator(new THREE.TextureLoader().load(texturePath), 4, 4, 10, 10);
const texture = animator.init();

Этот пакет работает только с обычными тремя. js? или я что-то упустил?

Answer 1

РЕДАКТИРОВАТЬ:

Так что @hpalu любезно указал, что мой предыдущий ответ был не лучшим, поскольку он приводит к одновременному рендерингу нескольких циклов, которые были визуализированы здесь когда я пытался создать события при наведении.

Вот рабочая @hpalu песочница с обновленным кодом, использующим useFrame, который позволяет компонентам участвовать в функции рендеринга, которая вызывается 60 раз в секунду.

Как вы можете видеть здесь , событие мыши хорошо работает с этим кодом без каких-либо сложностей

Оригинальный ответ :

Хорошо, посмотрите на пример , приведенный в документации. Похоже, я пропустил animator.animate() в функции анимации. Поэтому мне пришлось включить эту функцию в мой экспорт функции спрайта:

  const animate = () => {
    animator.animate();
    requestAnimationFrame(animate);
  };

И затем в секции возврата я вызвал функцию animate:

  return (
    <>
      <mesh/>
      </mesh>
      {animate()}
    </>
  )

Вот моя обновленная песочница: ссылка