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);
  };

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

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

这是我更新的沙箱：link

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

1 个答案: