What is the method for translating vertices within a THREE.PointCloud entity?

Question

What is the method for translating vertices within a THREE.PointCloud entity?

I am currently working on:

Developing a THREE.PointCloud object with around 150k points that are generated by a web application.
Adjusting the size of the points in the THREE.PointCloud object to achieve a desired outcome similar to what is seen here (created using MayaVi):

The issue I'm facing is:

The data being passed to the THREE.PointCloud object appears to be inaccurate.
When viewed in three.js, the points seem to be arranged into eight cubes without any clear reason (I haven't applied any scaling or transformations to the points).

Here is an example of the server response received (a snippet of sample data is provided at the end of this post):

{'geometry': [[-156, 65, 89],
              [268, 84, 337],
              [-205, 68, 170],
              [-87, 69, 52],
              ...
              [289, 81, 143],
              [141, 78, 280],
              [403, 75, 351]],
 'metadata': {'max': {'x': 421, 'y': 105, 'z': 458},
          'min': {'x': -335, 'y': 63, 'z': 39}}}

The code in three.js used for creating the point cloud is as follows:

 // Code snippet removed for clarity and brevity.

The resulting scene looks like this:

Any recommendations? I have referenced the example code provided, but struggle with implementing proper scaling for the data points in my dataset. You can view the code examples and sample dataset through the links below:

Example Code Reference

Sample Dataset (2MB)

javascript 3d three.js

Answer 1

Answer №1

I utilized the provided sample data by organizing it into an array, as shown below:

var data = [
"-156 65 89",
"268 84 337",
"-205 68 170",
"-87 69 52",
...
];

Subsequently, I employed THREE.Geometry() for PointCloud creation:

            var geometry = new THREE.Geometry();
            var colors = [];

            for ( var x = 0; x < data.length; x++){
                    var pointCoord = data[ x ].split(" ");
                    if ( pointCoord.length != 3 ) continue;
                    var currentColor = new THREE.Color( 0.5, 1, 0.5 );
                    colors.push( currentColor );
                    geometry.vertices.push(
                        new THREE.Vector3(
                            pointCoord[2],
                            pointCoord[1],
                            pointCoord[0]
                        )
                    );
                };
            //

            console.log( geometry.vertices.length );

            geometry.colors = colors;

            var material = new THREE.PointCloudMaterial( { size: 1, vertexColors: THREE.VertexColors } );

            particleSystem = new THREE.PointCloud( geometry, material );
            scene.add( particleSystem );

Furthermore, in geodata, the coordinates x and y are always interchanged (in this scenario, corresponding to x and z). Failing to do so will result in a mirrored object. This is why I formatted it as:

                        new THREE.Vector3(
                            pointCoord[2],
                            pointCoord[1],
                            pointCoord[0]
                        )

Rather than:

                        new THREE.Vector3(
                            pointCoord[0],
                            pointCoord[1],
                            pointCoord[2]
                        )

You can view the outcome here: geodata

Lastly, it appears that some lines in your sample data contain incorrect values with only 1 or 2 entries instead of 3.

Answer 2

I utilized the provided sample data by organizing it into an array, as shown below:

var data = [
"-156 65 89",
"268 84 337",
"-205 68 170",
"-87 69 52",
...
];

Subsequently, I employed THREE.Geometry() for PointCloud creation:

            var geometry = new THREE.Geometry();
            var colors = [];

            for ( var x = 0; x < data.length; x++){
                    var pointCoord = data[ x ].split(" ");
                    if ( pointCoord.length != 3 ) continue;
                    var currentColor = new THREE.Color( 0.5, 1, 0.5 );
                    colors.push( currentColor );
                    geometry.vertices.push(
                        new THREE.Vector3(
                            pointCoord[2],
                            pointCoord[1],
                            pointCoord[0]
                        )
                    );
                };
            //

            console.log( geometry.vertices.length );

            geometry.colors = colors;

            var material = new THREE.PointCloudMaterial( { size: 1, vertexColors: THREE.VertexColors } );

            particleSystem = new THREE.PointCloud( geometry, material );
            scene.add( particleSystem );

Furthermore, in geodata, the coordinates x and y are always interchanged (in this scenario, corresponding to x and z). Failing to do so will result in a mirrored object. This is why I formatted it as:

                        new THREE.Vector3(
                            pointCoord[2],
                            pointCoord[1],
                            pointCoord[0]
                        )

Rather than:

                        new THREE.Vector3(
                            pointCoord[0],
                            pointCoord[1],
                            pointCoord[2]
                        )

You can view the outcome here: geodata

Lastly, it appears that some lines in your sample data contain incorrect values with only 1 or 2 entries instead of 3.

What is the method for translating vertices within a THREE.PointCloud entity?

Answer №1

Similar questions

Whenever I try to update my list of products, I encounter an error message stating that the property 'title' cannot be read because it is null

Error in Passport JS: Trying to use an undefined function

Issue with a hidden div, problem with scrolling, a div overlapping other divs

Creating a default parameter for a JavaScript AJAX request function

Is it possible to conceal the text specifically inside a textarea, rather than just hiding the entire textarea itself?

Tips for creating a binding between an HTTP service and a variable in AngularJS that adjusts when the server data is modified

Tips for fetching form data transmitted via HTTPS in Node.js?

Reading a JSON file using Javascript (JQuery)

The query parameter is not defined in the router of my Next.js app API

Is it possible to create a pie chart using Chart.js with data fetched through an Ajax HTTP GET

Unresponsive Vanilla Bootstrap Navbar Links

Is it possible to utilize a library from one repository and integrate it into a different repository's web application through Webpack?

Encountering Webpack issues following the transition to Next 13

Issue with fulfilling Ajax promises

Removing a Div with Dynamic Parameters

How to make a GET request to a Node server using Angular

Organize my JavaScript code by implementing a function

Delaying UI interactivity until the document is fully loaded

Generate a text string by choosing options from a form

Accessing variables from child controllers with populated select inputs in Angular