admin管理员组

文章数量:1322692

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

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

Share Improve this question edited May 23, 2017 at 11:54 CommunityBot 11 silver badge asked May 14, 2015 at 17:07 Ricardo CarrapiçoRicardo Carrapiço 2705 silver badges10 bronze badges 1
  • The circles are probably from this example: threejs/examples/#canvas_particles_random – unconditional Commented May 14, 2015 at 21:50
Add a ment  | 

2 Answers 2

Reset to default 3

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.

A solution is associate circle images to each Point Cloud.

Could you have a look on this example :

https://threejs/examples/#webgl_points_billboards

Maybe in that you have the solution.

本文标签: javascriptChange square to circle in Threejs PointCloudStack Overflow