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
2 Answers
Reset to default 3There are multiple ways to do this:
- Use an image with a circle as the input like this.
- Use a
<canvas>
as the input (and draw a circle to the canvas) like this. - 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.