平滑的水平滚动-REACT THREE FIBER

Question

我一直在尝试用react three-fiber制作一个小的水平滚动，这样我以后就可以在元素上添加一些WebGL Distorsion，尽管我在最基本的方面取得了成功，但仍有一些地方需要改进：

(这里是对应的codesandbox：https://codesandbox.io/s/horizontal-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是否真的可行：(

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

提前感谢！

Answer 1

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

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

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