平滑的水平滚动 - REACT THREE FIBER

发布于 2025-01-09 06:53:21 字数 820 浏览 1 评论 0原文

我一直在尝试用 React 3 Fiber 制作一个小型水平滚动，这样我以后就可以在元素上添加一些 WebGL 扭曲，尽管我以最基本的方式成功了，但仍然有一些事情需要改进：（

这里是对应的codesandbox：https://codesandbox.io/s/horizontal-scroll-with-react- Three-Fiber-c0okfu?file=/src/Scene.js)

首先，我想要一个平滑的滚动，似乎无法实现，我使用 lerp 函数来实现，但结果效果不太好：

让滚动= 0;
  滚动=（滚动-滚动目标映射）* 0.03；

  // 任何其他框架，groupRef.current 未定义，不知道为什么
  // 但正因为如此，我必须将逻辑放入 if 循环中 
  if (groupRef.current) {
    groupRef.current.position.x = THREE.MathUtils.lerp(
      滚动，
      -滚动目标，
      0.01
    ）；
  }

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

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

原文

I've been trying to make a small horizontal scroll with react three fiber so I can later add some WebGL Distorsion on the elements and even though i succeeded in the most basic way, there are still some things that need improvement :

(here is the codesandbox corresponding :https://codesandbox.io/s/horizontal-scroll-with-react-three-fiber-c0okfu?file=/src/Scene.js)

first and foremost I want a smooth scroll and can't seem to be able to make it, I used the lerp function to make it but the result doesn't work very well :

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

secondly, the elements on my scene are placed kind of in a random way and the scene is not at all responsive. I would love to mimic the html logic and put my first element like 50px away from the left side of the screen but not sure if it's really possible with react threejs :)

If someone has any answer to one of those question, I take it ????

Thanks in advance !

分享到QQ

分享到微博