Image 我想用three.js实现水平图像滑块

我想在three.js中实现一个水平图像滑块

这是垂直滑块的示例。 我想实现下面的图像。（水平滑块）

vertexShader（）{
返回`
可变vec2 vUv；
可变vec3位置；
void main（）{
vUv=紫外线；
位置=位置；
gl_位置=projectionMatrix*modelViewMatrix*vec4（位置，1.0）；
}   
`
}
碎片着色器（）{
返回`
可变vec2 vUv；
可变vec3位置；
均匀采样2d-tex0；
均匀取样器2d-tex1；
均匀浮动分配器；
均匀浮动变焦因子；
统一的布尔隐藏；
void main（）{
浮子宽度；
如果（隐藏）{
除法器宽度=0.0；
}否则{
分割宽度=0.03/缩放因子；
}
if（vPosition.x>分隔器+分隔器宽度）{
gl_FragColor=纹理2d（tex1，vUv）；
}else if（位置x<分隔器-分隔器宽度）{
gl_FragColor=纹理2d（tex0，vUv）；
}否则{
gl_FragColor=vec4（0.5,0.5,1.0,1.0）；
}
}
`
}

必须为纹理坐标的

y

分量而不是顶点坐标的

x

分量编写文本。纹理坐标的分量在[0.0,1.0]范围内。因此，

除法器

的值也必须在[0.0,1.0]范围内：

vec4 texColor0=texture2D（tex0，vUv）；
vec4 texColor1=纹理2d（tex1，vUv）；
vec4滑块颜色=vec4（0.5,0.5,1.0,1.0）；
float limit0=除法器-除法器宽度；
浮动限制1=分隔器+分隔器宽度；
gl_FragColor=vUv.y>limit1？texColor1：（vUv.y

你好，拉比76。谢谢你友好的回答。你能解释一下如何在两幅图像中间显示水平滑块吗？@快乐yBu0320，当代码>分频器＝0.5 < /代码>哇时，滑块在图像的中间。非常感谢。我期待着你的继续帮助。

vertexShader() {

    return `
        varying vec2 vUv;
        varying vec3 vPosition;

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

}

fragmentShader() {

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

        }
    `
}