javascript - Three.js - 给粒子圆形

Question

我目前正在试验 three.js .我想更改下面示例中的代码，使点是圆形的，而不是方形的。

Codepen example

我找到了另一个名为 canvas particle random 的例子，它有圆形粒子，基本上，脚本中的唯一区别如下:

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

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

};

我想如果我把这个添加到另一个脚本中，那么粒子就会变成圆形。但是，当我将上述脚本添加到第一个脚本时，它不起作用(我只是蓝屏)。

有人知道我做错了什么吗？

Answer 1

尽管这个问题已在 2 年多前提出，但我认为添加您始终可以使用 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);