Reactjs 中的弯曲和可拖动轮播

【问题标题】：Curved and Draggable Carousel in ReactjsReactjs 中的弯曲和可拖动轮播
【发布时间】：2022-12-15 23:16:52
【问题描述】：

大家好，我有一个 Reactjs 项目，我想在其中开发一个可拖动的弯曲旋转木马。我设法用 Threejs 和 Reactjs 创建了一个“平滑”的滑块：Smooth Draggable Carousel。

但是不可能给它一个像这样的弯曲形状：

我做了很多研究，但在 Reactjs 和 Threejs 中找不到任何相关信息。可能有一个 vertexSheader 可以放在某个地方或一个库中。

【问题讨论】：

标签： reactjs three.js frontend carousel react-three-fiber

【解决方案1】：

是的，您可以在顶点着色器中执行此操作。您必须使用弯曲因子并根据 UV 变换 Z 以获得所需的结果。我这里有东西。

像那样，我正在使用一个简单的 MeshBasicMaterial：

    material.onBeforeCompile = shader => {

    shader.uniforms.time = { value: 0 };

    shader.vertexShader = `
      uniform float time;
      ${shader.vertexShader}
    `;

    shader.vertexShader = shader.vertexShader.replace(
      '#include <begin_vertex>',
      `
        vec3 pos = position.xyz;
        float bendFactor = ${bendFactor.toFixed(1)};

        vec2 uv2 = uv - 0.5;
        pos.z = bendFactor * pow(uv2.x, 2.);

        vec3 transformed = vec3( pos );
      `
    );

    material.userData.shader = shader;
  };

【讨论】：