javascript - Change square to circle in Three.js PointCloud? - Stack Overflow

admin管理员组

文章数量:1328623

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

• javascript
• 3d
• three.js
• point-clouds

Share Improve this question Follow edited May 23, 2017 at 11:54 CommunityBot 111 silver badge asked May 14, 2015 at 17:07 Ricardo CarrapiçoRicardo Carrapiço 27055 silver badges1010 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

Sorted by: 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