@
目录
概述
记录一下如何使用shader来画圆
let shader = {
vs: `
varying vec2 v_uv;
void main() {
v_uv = uv;
gl_Position = projectionMatrix * viewMatrix * modelMatrix * vec4( position, 1.0 );
}
`,
fs: `
varying vec2 v_uv;
uniform float u_time;
void main() {
vec3 bcol = vec3(0.29412, 0.70196, 0.63921) * (1.0 - 0.6 * length(v_uv));
// 原理：根据uv值来计算到原点的距离，大于半径值即在圆外，小于半径值在圆内
float pct = distance(vec2(0.5,0.5), v_uv);
// 椭圆
// pct = distance(v_uv,vec2(0.470,0.600)) + distance(v_uv,vec2(0.570,0.540));
//两个圆相吸
// pct = distance(v_uv,vec2(0.550,0.520)) * distance(v_uv,vec2(0.010,0.040));
//两个圆
// pct = min(distance(v_uv,vec2(0.140,0.130)),distance(v_uv,vec2(0.660,0.600)));
//两个圆相交部分 - 可以用来做遮罩
// pct = max(distance(v_uv,vec2(0.550,0.590)),distance(v_uv,vec2(0.6)));
//半径
float radius = 0.1;
// smoothstep(a, b, x)可以用来生成0到1的平滑过渡. 如果a > b 那x为1-》0过渡 ，如果a<b，那位0=》1过渡
float col = smoothstep(radius + 0.008, radius, pct) ;
gl_FragColor = vec4(vec3(col + bcol), 1.0);
}
`,
uniform: {
u_time: {
value: 0.0
}
}
}
let geometry = new THREE.PlaneGeometry(20, 20);
let material = new THREE.ShaderMaterial({
vertexShader: shader.vs,
fragmentShader: shader.fs,
uniforms: shader.uniform,
transparent: true
})
let mesh = new THREE.Mesh(geometry, material);
// mesh.rotateX(-Math.PI / 2);
scene.add(mesh);
