Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change square to circle in Three.js PointCloud?

I'm loading a .ply file using PLYLoader and rendering it using the PointCloud object in three.js.

var loader = new THREE.PLYLoader();
loader.addEventListener('load', function (event) {
    var geometry = event.content;
    var material = new THREE.PointCloudMaterial({ vertexColors: true, size: 0.01 });
    var mesh = new THREE.PointCloud(geometry, material);
    scene.add(mesh);
});
loader.load(file_url);

It's working okay, the points are rendered correctly. However the points are rendered as a square. Is it possible to change them to a circle? If so, how?

I found this old thread that shows the picture of a three.js sample. We can clearly see the circles. However that same sample today shows squares (after they changed the ParticleSystem to PointCloud).

Thank you

like image 263
Ricardo Carrapiço Avatar asked May 14 '15 17:05

Ricardo Carrapiço


1 Answers

There are multiple ways to do this:

  1. Use an image with a circle as the input like this.
  2. Use a <canvas> as the input (and draw a circle to the canvas) like this.
  3. Use ShaderMaterial and draw a circle with GLSL like this.
like image 172
Zach Saucier Avatar answered Sep 22 '22 15:09

Zach Saucier