5

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?

1
  • One way to do would be to simply use the texture of a white circle, setting the material's transparency to true and fiddling about with the alphaTest value, as hinted on this thread you're probably coming from. I did try that solution on the pen, which worked. I'm not able to fork it to you on my mobilephone at the moment though. Do give it a try. Jan 6, 2017 at 16:04

3 Answers 3

11

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);
1
  • Nice solution! But you should add depthWrite: false here as well.
    – N4ppeL
    Dec 22, 2020 at 16:14
7

As others have said, you can use a texture as the map in your PointsMaterial.
But if you just want circles, an easier method may be to create the map dynamically with a canvas (which is what the code you posted seems to be trying to do).

HERE is a fiddle with your code updated to use a canvas as your texture map.
NOTE: I have changed the colors in your paramters object to make it more obvious that different colors are being used.

The function that creates a circle on a canvas for use as a map.

function createCanvasMaterial(color, size) {
  var matCanvas = document.createElement('canvas');
  matCanvas.width = matCanvas.height = size;
  var matContext = matCanvas.getContext('2d');
  // create exture object from canvas.
  var texture = new THREE.Texture(matCanvas);
  // Draw a circle
  var center = size / 2;
  matContext.beginPath();
  matContext.arc(center, center, size/2, 0, 2 * Math.PI, false);
  matContext.closePath();
  matContext.fillStyle = color;
  matContext.fill();
  // need to set needsUpdate
  texture.needsUpdate = true;
  // return a texture made from the canvas
  return texture;
}

map canvas creation in the loop using the parameters object.

  for (i = 0; i < parameters.length; i++) {

    color = parameters[i][0];
    size = parameters[i][1];

    var hexColor = new THREE.Color(color[0], color[1], color[2]).getHexString();

    materials[i] = new THREE.PointsMaterial({
        size: 20,
        map: createCanvasMaterial('#'+hexColor, 256),
        transparent: true,
        depthWrite: false
    });

    particles = new THREE.Points(geometry, materials[i]);

    particles.rotation.x = Math.random() * 6;
    particles.rotation.y = Math.random() * 6;
    particles.rotation.z = Math.random() * 6;

    scene.add(particles);

  }

Have to set depthWrite to false on the marterial. see THIS issue.

I have now created a blog post on Three.js canvas particles

1

You can use a texture to your sprites:

  var tex = new THREE.TextureLoader().load("https://threejs.org/examples/textures/sprites/disc.png");
  // load the texture

  for (i = 0; i < parameters.length; i++) {

    color = parameters[i][0];
    size = parameters[i][1];

    materials[i] = new THREE.PointsMaterial({
      size: size,
      map: tex // apply the texture in your material
    });

    particles = new THREE.Points(geometry, materials[i]);

    particles.rotation.x = Math.random() * 6;
    particles.rotation.y = Math.random() * 6;
    particles.rotation.z = Math.random() * 6;

    scene.add(particles);

  }
3
  • This is exactly what I was trying to do, but when I added your lines to the script I only got a blue screen again...
    – Lavonen
    Jan 6, 2017 at 19:06
  • I've added those lines (with comments) to your codepen and got particles of circles. Jan 6, 2017 at 20:14
  • I'm sorry, there was something wrong with my browser and therefore I didn't get it to work. You answer works fine, however, the result is a white particle with a black box around.
    – Lavonen
    Jan 8, 2017 at 8:14

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.