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

Question

我正在使用包 three-plain-animator用于在我的网格中显示动画纹理。我使用的是 react-three-fibre 而不是普通的 three.js，出于某种原因，它会加载纹理但不会为其设置动画。这是我的 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 次的渲染函数。

如你所见here ，鼠标事件与此代码配合良好，没有任何并发​​症

原答案:

好的，从查看 example 开始在文档中提供。看起来我在动画函数中缺少 animator.animate()。所以我必须在我的 sprite 函数导出中包含这个函数:

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

然后在返回部分我调用了动画函数:

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

这是我更新的沙箱:link