版权声明:本文为作者的原创文章,未经允许不得转载。 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);
顶点着色器都一样,区别在画圆环的时候用了两次阶梯函数。