Can I show a sequence of pointclouds in browser?

Hi there,

I just managed to get a realsense D415 depth camera working in my little programm. I’m exporting a record of 30frames/sec to rosbag/ply or pcd file.

Later I want to show this recorded pointcloud sequence on my website. Is there a way in three.js to do this?
I don’t mean animation of one cloud.

Thanks for any help on this.

There are loaders for PCD as well as for PLY. Have a look at the following two examples to see how they are used:

Thank you for the links. I just had a quick look at the scripts. In my case I had to load at least 25 pointclouds each second to get a smooth sequence…like a video.
Do you think that is possible using the loader and some arrays holding the clouds data?


Loading the mentioned pointcloud data separately seems no good approach to me. Especially since each data set is represented as a single THREE.Points object after the loading process. A more efficient way to animate a set of points is morph target animation which is actually supported for THREE.PointsMaterial. The problem is that neither PCDLoader nor PLYLoader is able to load animated points. So you would have to create the morph targets by yourself.

I will check this out. Good to know that there is a way…:wink:
So I guess you mean morphing from pointcloud A → B ->C->n*

I would need to export the pointclouds to GLTF? It is better for web I read so far.

Correct :+1:

Definitely. It’s the recommended 3D format of three.js. More information about this topic right here:

In reference to a few experiments I did myself For morphing from pointcloud A → B ->C->n* I did it through RtabMap. From a windows environment its straight forward. Connect D415 to your windows device and get PCD of the enivironment not just the collection of frames it looks at saved as in your case 30 frames of pcd files for every second of recording.

But if you have a way to stream pcd with environment reconstruction on three.js it is already awesome.