带有反应三纤维的动画纹理

Question

我正在使用包 three-plain-animator for animated textures to be shown in my mesh. I am using react-three-fibre instead of plain three.js and for some reason, it loads the texture but doesn't animate it. Here is my Sandbox 来说明我的意思。我什至尝试不使用 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();

这个包只适用于普通 three.js 吗？还是我遗漏了什么？

Answer 1

编辑：

所以@hpalu 友善地指出，我之前的回答不是最好的，因为它会导致同时呈现多个循环，这在我尝试创建悬停事件时被可视化here。

这是 @hpalu 的工作 sandbox 更新代码利用 useFrame 允许组件参与称为 60 times/second.

的渲染函数

如您所见here，鼠标事件在这段代码中运行良好，没有任何并发症

原回答：

好吧，通过查看文档中提供的 example。看起来我在 animate 函数中缺少 animator.animate() 。所以我不得不在我的精灵函数导出中包含这个函数：

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

然后在 return 部分我调用了动画函数：

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

这是我更新的沙箱：link

带有反应三纤维的动画纹理

Animated textures with react-three-fibre

three.js

reactjs

react-three-fiber