three.js 用平面画圆和圆环

版权声明：本文为作者的原创文章，未经允许不得转载。 https://blog.csdn.net/lin5165352/article/details/89215698

three.js 用平面画圆和圆环

效果如下，实现这种效果最简单的方式就是用一张png贴图，就可以。
还要一种方式就是写个简单的shader，代码如下。
定义了三个可配置参数，分别为颜色，半径，过度边宽度。
UV是内置的变量，平面的默认UV很简单，从0-1。所以可以用当前的UV坐标和（0.5,0.5）进行运算，求距离。平面中心的点的值是0，然后向外扩散，形成一个高度场一样的环。

var uniform = {
	u_color: { value: new THREE.Vector3(1, 0, 0) },
	u_r: { value: 0.25 },
	u_edge: { value: 0.05 }
};
var vertexShader = [
	"varying vec2 vUv;",
	"void main(){",
	"vUv = uv;",
	"	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);",
	"}"

].join('\n');
var fragmentShaderYuan = [
	"varying vec2 vUv;",
	"uniform vec3 u_color;",
	"uniform float u_r;",
	"uniform float u_edge;",

	"void main(){",
	"float pct = distance(vUv,vec2(0.5));",
	"float t = smoothstep(pct-u_edge,pct,u_r);",
	"vec3 color = vec3(t*2.0);",
	"gl_FragColor = vec4(u_color,t);",
	"}"
].join('\n');

var fragmentShaderYuanhaun = [
	"varying vec2 vUv;",
	"uniform vec3 u_color;",
	"uniform float u_r;",
	"uniform float u_edge;",

	"float plot(float d, float pct){",
	"return  smoothstep( pct-u_edge, pct, d)- ",
	"smoothstep( pct, pct+u_edge, d);",
	"}",

	"void main(){",
	"float pct = distance(vUv,vec2(0.5));",
	"float t = plot(pct,u_r);",
	"vec3 color = vec3(t*2.0);",
	"gl_FragColor = vec4(u_color,t);",
	"}"
].join('\n');

var planeGeo = new THREE.PlaneGeometry(40, 40);
var material = new THREE.ShaderMaterial({
	vertexShader: vertexShader,
	fragmentShader: fragmentShaderYuan ,
	side: THREE.DoubleSide,
	uniforms: uniform,
	transparent: true,
	depthWrite: false,
});

var plane = new THREE.Mesh(planeGeo, material);
scene.add(plane);

顶点着色器都一样，区别在画圆环的时候用了两次阶梯函数。