Three.js - give particles round form

Question

I am currently experimenting with three.js. I would like to change the code in the example below so the dots are round, not square.

Codepen example

I found another example called canvas particle random, which has round particles, and basically, the only difference in the script is the following:

var PI2 = Math.PI * 2;
var program = function ( context ) {

    context.beginPath();
    context.arc( 0, 0, 0.5, 0, PI2, true );
    context.fill();

};

I thought that if I add this to the other script, then the particles would become round. However, when I added the above script to the first script, it doesn't work (I just get a blue screen).

Anyone know what I am doing wrong?

Answer 1

Even though this question has been asked more than 2 years ago, I thought it would be useful to add that you could always write your own fragment shader using a three.js ShaderMaterial:

let geom = new three.Geometry();
geom.vertices.push(new three.Vector3(0,0,0));
let material = new three.ShaderMaterial({
    transparent: true,
    uniforms: {
        size: {value: 10},
        scale: {value: 1},
        color: {value: new three.Color('maroon')}
    },
    vertexShader: three.ShaderLib.points.vertexShader,
    fragmentShader: `
    uniform vec3 color;
    void main() {
        vec2 xy = gl_PointCoord.xy - vec2(0.5);
        float ll = length(xy);
        gl_FragColor = vec4(color, step(ll, 0.5));
    }
    `
});
let points = new three.Points(geom, material);