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

Question

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

这是垂直滑块的示例。我想实现下图。（水平滑块）。 This is the example of a horizontal slider.

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

        }
    `
}

Answer 1

您必须输入纹理坐标的 y 分量而不是顶点坐标的 x 分量。纹理坐标的分量在 [0.0, 1.0] 范围内。因此 divider 也必须是 [0.0, 1.0] 范围内的值：

vec4 texColor0 = texture2D(tex0, vUv);
vec4 texColor1 = texture2D(tex1, vUv);
vec4 sliderColor = vec4(0.5, 0.5, 1.0, 1.0);

float limit0 = divider - dividerWidth;
float limit1 = divider + dividerWidth;

gl_FragColor = vUv.y > limit1 ? texColor1 : (vUv.y < limit0 ? texColor0 : sliderColor);

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

I want to implement the horizontal image slider with three.js

shader

image

glsl

slider

three.js