在Threejs導入顯示點雲數據

在Threejs導入並顯示點雲數據

最近在項目中遇到需求，需要在web端顯示點雲數據。將我的實現步驟介紹在這裏供大家參考。我使用的是threejs開源庫，最終實現

1. 數據格式

原本是點雲數據是ply格式的。在threejs中有ply導入的loader，經過簡略的閱讀和學習。我只找到了它加載mesh文件的支持函數，對於點雲沒有找到相關的支持。於是我就考慮使用對html來說更容易讀取的json格式存儲和導入點雲數據。

值得一提的是，json文件佔用空間會更大，如果有時間我也希望可以使用一些二進制的存儲方式，但是在這裏只是爲了實現，暫時不考慮太多效率方面的問題。

於是我使用C++，先將ply文件轉寫成json文件。

1.1 jsoncpp

C++上使用的是jsoncpp，但是cmakelist配置遇到了一點問題。最後綜合了許多回答。加載了頭文件之後，我自己在電腦中找到了靜態庫文件加載到了項目中。可能不是很優美，但是可以完美的運行和使用了。

find_package(PkgConfig REQUIRED)
pkg_check_modules(JSONCPP jsoncpp)

include_directories(
${JSONCPP_INCLUDE_DIRS}
)

target_link_libraries(example 
  /usr/local/lib/libjsoncpp.a
)

1.2 C++重寫文件

我使用了下面的函數讀取並重寫了json文件。

void Ulocalization::LoadPlyAndSaveJson(const std::string& load_path, const std::string& save_path)
{
    std::cout << std::endl << "[TO JSON]  Load fused down sampled point cloud and save to . " << std::endl;
   
    std::vector<PlyPoint> plypointT = ReadPly(load_path);
    std::cout << "   There are " << plypointT.size() << " points." << std::endl;

    Json::Value root;
    Json::Value vertex;
    Json::Value color;
    constexpr bool shouldUseOldWay = false;
    root["descrition"] = "vertex and color, each is a 3 element vector";
    root["name"] = "spring square";
    root["size"] = plypointT.size();
    
    for(size_t i=0, iend=plypointT.size(); i<iend;i++)
    {
        float xpt = plypointT[i].x;
        float ypt = plypointT[i].y;
        float zpt = plypointT[i].z;
        int rcolor = plypointT[i].r;
        int gcolor = plypointT[i].g;
        int bcolor = plypointT[i].b;
        vertex.append(xpt);
        vertex.append(ypt);
        vertex.append(zpt);
        color.append(rcolor);
        color.append(gcolor);
        color.append(bcolor);
    }

    root["vertex"] = vertex;
    root["color"] = color;

    std::ofstream ofs;
    ofs.open(save_path);
    ofs << root.toStyledString();
    ofs.close();

    std::cout << "   Saved to " << save_path << std::endl << std::endl;
}

2. JSON的讀取

在html中讀取json我使用的是下面的這個庫，在網上可以找到一些相關的使用方法。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

它主要有兩種調用方法，一個是通過 “.getJSON (jsonFile, function(data){…})” 。

var x,y,z,r,g,b;
var jsonFile = "../resources/fused_downsampled.json";
			
//var particlesX = new Array(200);
//var particles = new Array(200);
// see more https://blog.csdn.net/weixin_39823527/article/details/80392839
// we cannot use this mehtod, we need synchronous method, otherwise the json file will load fail.
//$.getJSON (jsonFile, function(data){
//	var index = 0;
    //	$.each(data.vertex, function(i,item){
    			//		if (i%3 == 0) x = parseInt(item*10);
			//		else if (i%3 == 1) y = parseInt(item*10);
			//		else if (i%3 == 2) {
			//			z = parseInt(item*10);
			//			var particle = new THREE.Vector3(x, y, z);
			//			particlesX[index] = x;
			//			particles[index] = particle;
			//			index = index + 1;
			//		}
			//		if(index > 199) return false;
  			//	});
			//	console.log("load done!");
			//});

但是上面的是異步的調用方式。爲了方便我使用的是".ajax({…})"提供的同步調用。

$.ajax({
         type: "get",
         url: jsonFile,
         dataType: "json",
         async: false,
         success: function(data){
             var index = 0;
			 console.log("start load!");
             console.log("data point size ：", data.size);
			 for(var i = 0; i < data.size; i++){
				  if (i%3 == 2) {
						x = -data.vertex[i-2]*10;
					    y = -data.vertex[i-1]*10;
						z = data.vertex[i]*10;
						r = data.color[i-2]/255;
						g = data.color[i-1]/255;
						b = data.color[i]/255;
						var particle = new THREE.Vector3(x, y, z);
						geometry.vertices.push(particle);
						geometry.colors.push(new THREE.Color(r,g,b));
					}
  				}
				console.log("load done!");	
                }
});

3. 使用threejs中的Points

threejs中提供了Points方法以加載和顯示點雲數據。我們使用它來顯示點雲。

var cloud;
cloud = new THREE.Points(geometry, material);
scene.add(cloud);

最終的效果如下所示，也可以訪問網頁最終實現。值得一提的是，我使用github來發布，但是github上有文件大小的限制（25m），json的文件又相對比較大，所以我對點雲做了降採樣處理，然後才成功完成。