Reactjs 带有三根纤维的动画纹理

我正在使用该软件包在网格中显示动画纹理。我使用的是react three fibre而不是plain three.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();

这个包是否只适用于plain three.js？还是我遗漏了什么？

编辑：

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

下面是@hpalu使用更新的代码，该代码利用useFrame，允许组件参与渲染函数，该函数称为60次/秒

正如您所看到的，鼠标事件与此代码配合得很好，没有任何并发症

原始答案：

好的，看看文档中提供的。看起来我在animate函数中缺少了

animator.animate（）

。因此，我必须在我的sprite函数导出中包含此函数：

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

然后在返回部分，我调用了animate函数：

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

返回(
{animate（）}
)

---

这是我更新的沙盒：

这可能是“危险的”，因为在中，您正在将副作用添加到渲染功能中。例如，另一个渲染和动画循环将运行两次。这就是useFrame的用武之地，它允许组件参与渲染功能，该功能称为60次/秒：ps。此外，通常您还可以获得超级帮助quick@hpalu是的，你是绝对正确的，我在使用useEffect添加事件时很快意识到，它会多次渲染循环，然后做出疯狂的反应。非常感谢你的帮助，我会改变我的答案。然而，我确实有一个问题，我意识到你把

useFrame（（）=>animator.animate（））

放进去了，但我似乎找不到它调用的动画函数，所以我不明白它是如何工作的。我想它可能是react three fiber的一部分，但我查看了文档，似乎找不到它。很抱歉，如果这似乎是一个明显的问题。r3f也在循环中运行，useFrame将向其订阅组件。所以基本上它在r3f的内部raf循环中执行函数。以及所有其他订户。这使得使用依赖循环的插件（控件、动画等）变得非常容易，而且非常有效，因为有多个requestanimationframe循环会对性能产生负面影响。您还可以将useFrame用于基于帧的动画，例如：