0

我一直在尝试用 React 三纤维制作一个小的水平滚动，以便以后可以在元素上添加一些 WebGL Distorsion，即使我以最基本的方式成功，仍然有一些需要改进的地方：

（这里是对应的代码框：https ://codesandbox.io/s/horizo​​ntal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js ）

  • 首先，我想要一个平滑的滚动，但似乎无法做到，我使用了 lerp 函数来做到这一点，但结果不是很好：

    let scroll = 0;
  scroll = (scroll - scrollTargetMapped) * 0.03;

  // any other frame, groupRef.current is undefined, don't really know why
  // but because of it, i must put my logic inside an if loop 
  if (groupRef.current) {
    groupRef.current.position.x = THREE.MathUtils.lerp(
      scroll,
      -scrollTarget,
      0.01
    );
  }

  • 其次，我场景中的元素是随机放置的，场景完全没有响应。我很想模仿html逻辑并将我的第一个元素放在离屏幕左侧50px的地方，但不确定是否真的可以使用react threejs :)

如果有人对其中一个问题有任何答案，我会接受

提前致谢 ！

4

1 回答 1

0

对于那些感兴趣的人，我设法找到了一个解决方案，使用一个 drei 组件：ScrollControl，它工作得很好！

https://codesandbox.io/s/horizo​​ntal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js

有关上述组件的更多信息，请查看文档：https ://docs.pmnd.rs/drei/controls/scroll-controls

于 2022-02-22T15:35:29.640 回答