我想用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);