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

问题描述

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

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

list(map(list,set(map(tuple,a))))
#[[2,2],[2,2,1,0],2]]

解决方法

您必须输入纹理坐标的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);