2

我正在使用包三纯动画器来在我的网格中显示动画纹理。我使用的是 react-three-fiber 而不是普通的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();

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

4

1 回答 1

1

编辑：

所以@hpalu 好心地指出，我之前的答案并不是最好的，因为它会导致同时渲染多个循环，当我尝试创建悬停事件时，这在此处可视化。

这是@hpalu 的工作沙箱，其中包含使用useFrame 的更新代码，它允许组件参与渲染功能，该功能被称为60 次/秒。

正如您在此处看到的，鼠标事件在这段代码中运行良好，没有任何复杂性。

原答案：

好的，请查看文档中提供的示例。看起来我错过animator.animate()了 animate 函数内的内容。所以我不得不在我的精灵函数导出中包含这个函数：

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

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

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

这是我更新的沙箱：链接

于 2020-04-05T11:34:36.193 回答