Is it possible to swap squares for circles in a Three.js PointCloud?

Currently, I am loading a .ply file using PLYLoader in three.js and displaying it as a PointCloud. Here is the code snippet:

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);

The rendering works fine, but the points are appearing as squares instead of circles. Is there a way to change their shape to circles? If yes, how can this be achieved?

In my search for a solution, I came across an old thread showcasing a three.js example with circular points which I found interesting. However, when I visited the same sample today, the points were rendered as squares after they switched from ParticleSystem to PointCloud.

Your insights on how to render points as circles would be greatly appreciated. Thank you!

Answer №1

There are several methods to achieve this:

  1. Opt for an image with a circular shape as the input similar to this example.
  2. Utilize a <canvas> element as the input (and manually draw a circle onto the canvas) just like this approach.
  3. Apply ShaderMaterial and create a circle using GLSL in a manner similar to this implementation.

Answer №2

One possible approach is to link circular images to every Point Cloud.

Take a look at this example for reference:

You might find the solution you're looking for there.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to retrieve a list of unchecked checkboxes in a Razor Page model?

Currently, I am working on a razor page using .NET Core 7. I have encountered an issue where I am unable to pass values of 1, 2, and 3 for unchecked checkboxes from the HTML page to the page model in the post method. When the user clicks the submit button ...

What is the best way to arrange an array or display it accurately?

Guys, here's a challenge for you: extract the values from this JSON data: [[name, brand, oem, category], [name, brand, oem, category], [name, brand, oem, category], [name, brand, oem, category]] Check out my JavaScript code: $(function(){ $('i ...

The initial setTimeout function functions correctly, however the subsequent ones do not operate as expected

I have developed the following code: bot.on('message', message=> { if(message.content === "come here") { message.channel.send('hey'); setTimeout(() => { message.channel.send('i am here' ...

JSON containing attributes represented by Unicode characters

During the development of my web application, I am interested in utilizing JSON objects with Unicode attributes as shown below: a = { ονομα:"hello" } Subsequently, I would like to access it in this manner: a.ονομα Alternatively, exploring lo ...

What is the technique for filtering multiple values using the OR operation in ng-model functions?

Currently, I am using an ng-modal labeled as "myQuery." At the moment, there are two filters in place that look like this: <accordion-group heading="" ng-repeat="hungry_pets in Pets" | filter:{hungry:false} | filter:{name:myQuery}" ... > I have ...

There seems to be a Javascript TypeError occurring - it looks like the function document.routeEvent

I am currently working on an old webpage that contains JavaScript. However, there is a function that does not seem to work properly with newer browsers such as Mozilla, Chrome, and Safari. Interestingly, the page functions perfectly fine on Internet Explor ...

Issue on WordPress where JQuery is undefined causing continuous refreshing on IPhone devices

My wordpress website is performing well in most browsers, including some mobile ones. However, when accessed on an IPhone, the homepage keeps refreshing in a continuous loop. Even after emulating an IPhone using Chrome developer tools, the issue persists. ...

Utilizing Angular JS to parse JSON data and showcase it in various tables

Just diving into Angular JS and looking for some guidance. Can someone show me how to parse and showcase JSON Data in separate tables using Angular JS? [ { "id": 0, "isActive": false, "balance": 1025.00, "picture": "htt ...

Using dataloader on ammap effectively involves importing the necessary data into the platform

I've been attempting to implement the dataloader feature on ammap without success. Here is my current approach: var birth_map = AmCharts.makeChart( "il_bazinda_dogum_say_dagilim", { "type": "map", "data": { ...

Exploring yii2 with javascript to display image previews

I am looking to add a feature to my yii2 app similar to this: How to preview multiple images before upload?. I want to display up to five images but my current code is not working. When I select a file, nothing happens. <?php use yii\helpers\ ...

Issue with Express - Session not persisting across consecutive SSE requests

Currently, I am delving into Server-sent Events using Node.js and Express. I have successfully set up request handling and stream writing, but I am facing challenges with session management. The session does not persist between subsequent calls. Snippet o ...

When working with React JS and the react-select library, I am looking to automatically reset the options to their default value once

I am attempting to disable the select list after unchecking the checkbox and resetting the select value back to default, but currently it is retaining the last selected option. I am utilizing React-select for the select and options in this scenario. APP.j ...

"Cross-origin resource sharing problem while working with NodeJs, Express, and React on

Currently, I am working on a small project where I am using NodeJs and Express for the backend and React for the client side. In order to tackle CORS policy issues, I have implemented the "cors" npm package on the server side, but unfortunately, it doesn& ...

Using Jquery to set values for css properties

I've recently started using jquery and I have a task related to a drop-down menu that I'm struggling with: if (scrnwidth <= 761) { if (display was block) { //Defaultly testi has display:none property. testi = m ...

It looks like everything is running smoothly, but it seems like the ReactDOM.render() method is missing in action

I'm currently diving into the world of React.js and eager to build my knowledge from the basics upwards. While delving into the documentation, I stumbled upon the utilization of ReactDOM.render(element, Document.getElementById("root")), whi ...

Excluding the decimal point from version 1.0 in an API response with Angular 5

When working with Angular 5, I encountered an issue where the API response was returned as 1.0, but when displayed in the HTML field it only showed as 1. Upon inspecting the response in Chrome dev-tools, under the Network tab -> Response, it correctly ...

What is the reason that in jsxgraph, a parabola is not able to be created by connecting five points on a single plane?

I recently encountered an issue while working on a project involving drawing points in 3D space that move according to slider values. Even though the points moved correctly, I faced difficulty in drawing a conic section (specifically a parabola) through th ...

Automated browsing: identifying the difference between AJAX and iframes

During my automated requests (scheduled at specific times, without user involvement), I have noticed that xmlHttpRequest includes extra http headers. In order for the server not to be able to distinguish these requests as automated (they should appear exa ...

What are the best methods for preserving paint color when changing wheel styles, and vice versa?

I posted this query about a year ago, but I did not have a fiddle prepared at that time and my question was not as well articulated as it could have been. Despite that, many people came forward to offer their help, and I am truly grateful for that. This ti ...

lowdb only modifies a single piece of information in the JSON file

When updating a JSON file with a lowdb request, only the date gets updated. Upon logging the information to be updated, this is the desired update: res.on("end", function () { let body = Buffer.concat(chunks); let final = JSON.parse ...