基于Three.js实现横向图片滑块的技术需求及代码参考

看起来你已经有纵向滑块的基础了，想要转成横向版本的话，你提供的这两段着色器代码就是核心实现。我帮你拆解一下逻辑，方便你整合到Three.js项目里：

顶点着色器（Vertex Shader） #

这段代码就是基础的顶点数据传递，把UV坐标和顶点位置传给片元着色器，没有复杂逻辑：

varying vec2 vUv;
varying vec3 vPosition;

void main() {
    vUv = uv;
    vPosition = position;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

简单说，它就是把模型的UV信息和顶点在空间中的位置，传递给后面的片元着色器，让片元 shader 能判断每个像素该显示哪张图。

片元着色器（Fragment Shader） #

这部分是横向滑块的核心，完全是按横向（X轴）来划分两张图的显示区域，还做了分隔线的适配：

varying vec2 vUv;
varying vec3 vPosition;

uniform sampler2D tex0;
uniform sampler2D tex1;
uniform float divider;
uniform float zoomFactor;
uniform bool hidden;

void main() {
    float dividerWidth;
    if (hidden) {
        dividerWidth = 0.0;
    } else {
        dividerWidth = 0.03 / zoomFactor;
    }

    if (vPosition.x > divider + dividerWidth) {
        gl_FragColor = texture2D(tex1, vUv);
    } else if (vPosition.x < divider - dividerWidth) {
        gl_FragColor = texture2D(tex0, vUv);
    } else {
        gl_FragColor = vec4(0.5, 0.5, 1.0, 1.0);
    }
}

我给你划几个关键细节：

• Uniform参数说明：
  • tex0/tex1：就是你要对比的两张图片纹理
  • divider：横向分割线的X轴位置，你可以通过Three.js动态修改这个值（比如监听鼠标移动），就能实现滑块拖拽的交互
  • zoomFactor：适配模型缩放的因子，避免缩放后分隔线变宽或变窄
  • hidden：一键隐藏分隔线的开关，设为true时中间的蓝色线就消失了
• 核心判断逻辑：
  先根据hidden和缩放因子算出分隔线的实际宽度，再通过顶点X位置判断：
  • 分割线右侧显示tex1，左侧显示tex0
  • 中间区域显示蓝色分隔线（你可以改成自己想要的颜色或纹理）

项目整合小提示 #

把这段代码用到Three.js里的话，记得做这几步：

1. 创建ShaderMaterial，把上面的顶点、片元着色器代码传进去
2. 加载两张图片纹理，赋值给tex0和tex1这两个uniform
3. 给divider变量加交互：比如监听鼠标移动，把鼠标X坐标转换成模型空间的X值，实时更新divider，就能拖动滑块了
4. 如果你的模型有缩放操作，记得同步更新zoomFactor，保证分隔线宽度始终合适

内容的提问来源于stack exchange，提问作者happybear0320