我正在使用包three-plain-animator 来在我的网格中显示动画纹理。我使用的是 react-three-fiber 而不是普通的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吗？还是我错过了什么？
【问题讨论】：
标签： reactjs three.js react-three-fiber
编辑：
所以@hpalu 好心地指出，我之前的回答并不是最好的，因为它会导致同时呈现多个循环，当我尝试创建悬停事件时，here 可视化了。
这里是 @hpalu 的工作 sandbox 更新代码，它利用 useFrame 允许组件参与渲染函数，该函数被调用 60 次/秒。
如您所见here，鼠标事件在这段代码中运行良好，没有任何复杂性
原答案：
好的，请查看文档中提供的example。看起来我在动画函数中错过了animator.animate()。所以我不得不在我的精灵函数导出中包含这个函数：
const animate = () => {
animator.animate();
requestAnimationFrame(animate);
};
然后在返回部分我调用了 animate 函数：
return (
<>
<mesh/>
</mesh>
{animate()}
</>
)
这是我更新的沙盒：link
【讨论】：
useFrame(() => animator.animate())，但我似乎找不到它正在调用的动画函数，所以我不明白它是如何工作的。我想它可能是 react-three-fiber 的一部分，但我查看了文档，但似乎找不到它。抱歉，这似乎是一个显而易见的问题。