Three. Based on ply format point cloud voxel model JS upload interface writing

I checked the relevant materials and found the content of voxels , May be studied more thoroughly , The relevant documents are too few to find .

With a point cloud PLY File as an example ,ply You can save some clouds and his patches , It can also be used to preserve voxels .

But in three.js in Although it comes with one PLYloader As shown in the figure below ：

But this PLYloader Load only Faceted ply file , For voxelized ply The file can read relevant information , But it can't be displayed in the browser . The reason is that voxels ply And dough ply The data form of is a little different .

Let's open two different ply File comparison （ Be careful ,ply The document needs to be binary Binary to ascii Format , Otherwise, it can't be used txt open ）

On the left is voxelized ply file , Relatively normal in the back Ply A few parameters are missing, and the connection information of the patch is useless .（ Open this and see for yourself ）

Point out Voxel model focuses on that 6 In figures The first three digits represent XYZ, The last three digits represent 255 Of RGB.

Now there are coordinates and colors In fact, voxels can be generated , Of course, we need to generate in the browser .

const file_loader = new THREE.FileLoader();
        file_loader.load("LOOK.ply",function (data){
            ply_data.file_data =data
            ply_data.point_list = ply_data.file_data.split('end_header\n')[1].split("\n")
            //console.log(ply_data.point_list)
            let positons = []
            let colors= []
            let num;
            num = ply_data.point_list[1]
            // in the light of  ply_data.point_list  Data cleansing 
            ply_data.point_list.length -= 1;
            // Delete two items 
            ply_data.point_list.shift();
            ply_data.point_list.shift();

            for (let point_str of ply_data.point_list){
                //console.log(point_str)
                let str_list = point_str.split(" ")
                positons.push(str_list[0],str_list[1],str_list[2])
                colors.push(str_list[3]/255,str_list[4]/255,str_list[5]/255)

                // Make a rectangle 
                var material2 = new THREE.MeshBasicMaterial(  );
                var cubeGeometry2 = new THREE.BoxGeometry(1,1,1);
                var cube =new THREE.Mesh(cubeGeometry2, material2)
                cube.position.x =str_list[0]
                cube.position.y =str_list[1]
                cube.position.z =str_list[2]
                cube.material.color.r=str_list[3]/255
                cube.material.color.g=str_list[4]/255
                cube.material.color.b=str_list[5]/255

                scene.add(cube)
            }

So with three.js Write an interface , The principle is right txt File segmentation , Find the content of each paragraph , The rectangle is generated by itself , I used it here mesh Generate , Can't find setAttribute This method of , I think PCDloader This method is used to load point clouds in batch , But in the mesh I didn't find it in the cube ... So loop generated , It should affect the speed of loading .

The result of the last load ：

Disadvantages of voxel model , Because the browser load is too stretched , Without optimization Can't generate too many small squares （ Optimization estimation is also important ）, Otherwise, it's easy to get stuck , This is also three.js The reason why voxels are not used very much in .