How to live update the point cloud data in three js

Questions
1

Hi,

In my scene i am a loading pcd file, it works fine. The pcd file changes as we can scan the enivronment. I try to load the live feed from camera to pcd into the scene, but i dont know to do it.

i tried to put a setinterval and delete the current point cloud and load the next one, this doesnt give me a continous video like visualisation.

loadEnvironment() {
      this.scene.children.forEach(element => {
        if (element.type == 'Points') {
          this.scene
            .getObjectByProperty('uuid', element.uuid)
            .geometry.dispose()
          this.scene
            .getObjectByProperty('uuid', element.uuid)
            .material.dispose()
          this.scene.remove(
            this.scene.getObjectByProperty('uuid', element.uuid)
          )

          this.redraw()
        }
      })
      var loader = new THREE.PCDLoader()
      let self = this
      loader.load(
        'http://172.21.1.144:8081/static/env.pcd',
        function(mesh) {
          self.scene.add(mesh)
        },
        function(xhr) {
          console.log((xhr.loaded / xhr.total) * 100 + '% loaded')
        },
        function(error) {
          console.log(error)
        }
      )
      /*        */
    }

Is it possible to keep on updating the current mesh rather than creating and deleting the old one.

im really new to these stuff.

2

You can update the existing geometry attributes if the buffer size does not change. Meaning if you need larger buffers, you have to dispose the geometry and replace it with a new one. Unfortunately, three.js does not support the disposal of individual attributes.

The following example shows how you update a buffer attribute:

https://threejs.org/examples/webgl_buffergeometry_custom_attributes_particles