CODEWITHSUNDEEP
javascript3dthree.jspoint-clouds
Ricardo Carrapiço
Ricardo Carrapiço

Reputation: 270

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

Upvotes: 10

Views: 7096

Answers (2)

Zach Saucier
Zach Saucier

Reputation: 26014

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.

Upvotes: 2

user3410517
user3410517

Reputation: 295

A solution is associate circle images to each Point Cloud.

Could you have a look on this example :

https://threejs.org/examples/#webgl_points_billboards

Maybe in that you have the solution.

Upvotes: 0

Related Questions