How to plot bounding box with respect to a point cloud

Questions
,
#1

Hi, I am loading a Point cloud file using PCD loader.
I have also loaded certain bounding boxes based on some given coordinates, but I am not able to make these boxes properly aligned with the point cloud coordinates. The boxes are not in the correct position and are not grounded and seem to be floating above the point cloud.

Here is a snippet with which I loaded my point cloud and the bounding boxes:

private loadPCD() {
    const loader = new PCDLoader();
    loader.load(
      this.url,
      (points: THREE.Points) => {
        if (this.pcdLoaded) {
          return;
        }
        points.userData.boundingBoxAnnotationContent =
          this.boundingBoxAnnotationContent;
        const geometry: THREE.BufferGeometry = <THREE.BufferGeometry>(
          points.geometry
        );
        const material: THREE.PointsMaterial = <THREE.PointsMaterial>(
          points.material
        );

        geometry.center();
        geometry.rotateX(Math.PI);
        material.side = THREE.DoubleSide;
        material.color.setHex(this.defaults.hex);
        this.pointCloud = points;
        this.grid = this.setGridHelper();
        this.scene.add(this.pointCloud);
        this.populateBoundingBoxAnnotation(); // here I am populating the bounding box after //adding the point cloud to scene.
        this.scene.add(this.grid);
        this.render();
        this.saveCameraControlState();
        if (this.cameraControlsEnabled) this.animate();
        this.centerOfLidar = this.getVisualCenterOfPolygon(geometry);
        const count = geometry.attributes.position.count;
        this.numberOfPointsLoaded = count;
        this.numberOfPointsShowing = this.numberOfPointsLoaded;
        
        
        this.isLoading = false;
        this.event.emit({
          trigger: "lidar-data-loaded-trigger",
          loaded: true,
          referencedAnnotation: {
            resourceHasAnnotatedJSON: this.resourceHasAnnotatedJSON,
            annotationContent: this.boundingBoxAnnotationContent,
          },
        });
        this.pcdLoaded = true;
        this.initStats();
        this.evaluateDistanceFromOrigin(geometry);
      },
      (progress) => {
        this.progress = Math.round((100 * progress.loaded) / progress.total);
      },
      (err) => {
        this.isLoading = false;
        this.event.emit({
          trigger: "lidar-data-loaded-trigger",
          loaded: false,
          referencedAnnotation: {
            resourceHasAnnotatedJSON: this.resourceHasAnnotatedJSON,
            annotationContent: this.boundingBoxAnnotationContent,
          },
        });
        this.loadingError = true;
      }
    );
  }

 private populateBoundingBoxAnnotation() {
    if (this.resourceHasAnnotatedJSON && this.boundingBoxAnnotationContent) {
      const _g = new THREE.BoxGeometry();
      _g.center();
      _g.rotateX(Math.PI);
      const tempV = new THREE.Vector3();
      this.boundingBoxAnnotationContent.forEach((bb: BoundingBox) => {
        this.createBoundingBoxInstance(
          _g,
          this.defaults.boundingBoxConfig.color,
          this.getBoundingBoxCoords(bb.coordinates),
          tempV,
          bb.class_name
        );
      });
    }
  }

createBoundingBoxInstance(
    geometry: THREE.BoxGeometry,
    color: string | THREE.Color | number,
    coords: Coordinates,
    vector: THREE.Vector3,
    label: string
  ) {
    const material = new THREE.MeshBasicMaterial({ color ,wireframe:true});
    const cube = new THREE.Mesh(geometry, material);
    
    cube.position.x = coords.position.x;
   cube.position.y = coords.position.y;
   cube.position.z = coords.position.z;

    cube.rotation.x = coords.rotation.x;
   cube.rotation.y = coords.rotation.y;
   cube.rotation.z = coords.rotation.z;

    cube.scale.x = coords.scale.x;
   cube.scale.y = coords.scale.y;
   cube.scale.z = coords.scale.z;
    this.scene.add(cube);
    cube.updateWorldMatrix(true, false);
    cube.getWorldPosition(vector);
    vector.project(this.camera);
  }

With this I get a result like this:

actual
actual1364×620 76.5 KB

But the expected result needs to be like this where the bounding boxes are rightly aligned with the points and are grounded:
expected
expected821×363 188 KB

Any help in this regard is appreciated.

#2

pcd-loader.component.html (3.0 KB)
pcd-loader.component.scss (1.5 KB)
pcd-loader.component.ts (46.7 KB)
2.pcd (7.7 MB)

If anyone needs to recreate this, you can do the same in a boilerplate angular project and have a look.
Dependency : “three”: “^0.138.2”
Dev Dependency:
“@types/polylabel”: “^1.0.5”,
“@types/three”: “^0.138.0”,
“@types/webgl2”: “0.0.6”,

#3

Any insights into this problem? Anyone ? @prisoner849 @Mugen87

#4

Any chance to provide JSON with the data for a couple of boxes?

#5

Sure @prisoner849 here you go with the JSON data for the bounding boxes:

{
    "annotations": [
        {
            "class_name": "Vehicle: Truck:2",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": -28.44411040997511,
                    "y": -10.908647499411018,
                    "z": 1.5639627284249258
                },
                "scale": {
                    "x": 6.527588845825132,
                    "y": 2.7053958469647084,
                    "z": 3.088753093568613
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 1.1588591747591366
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:3",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 73.14449593032623,
                    "y": 30.126947760894836,
                    "z": 2.020717003637529
                },
                "scale": {
                    "x": 12.30766479140657,
                    "y": 3.3607588655188474,
                    "z": 3.998681604635891
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": -0.5487445375123619
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:1",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 25.01690032775514,
                    "y": 2.263714672830247,
                    "z": 1.9643663735558619
                },
                "scale": {
                    "x": 12.745152036697608,
                    "y": 3.4765292357818036,
                    "z": 3.7974907141831835
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": -0.5331106969643833
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:4",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 52.67422455341148,
                    "y": 27.45185899677017,
                    "z": 2.0037544675777923
                },
                "scale": {
                    "x": 12.555134377146214,
                    "y": 3.065328958835853,
                    "z": 4.1331076282010315
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.7345906594565985
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:5",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 11.870985735571594,
                    "y": 38.88986719108652,
                    "z": 2.4780189122414527
                },
                "scale": {
                    "x": 12.492040840733727,
                    "y": 2.9599363257716074,
                    "z": 3.277454879289394
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.6185516904570356
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:6",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 6.586469112473424,
                    "y": 40.04654127165122,
                    "z": 2.418127306912737
                },
                "scale": {
                    "x": 2.0797496300919427,
                    "y": 2.2058505020229275,
                    "z": 3.2304734340850843
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.592521994924967
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:7",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 5.285188266563637,
                    "y": 43.54250093062001,
                    "z": 2.4308194215461043
                },
                "scale": {
                    "x": 2.570057617341567,
                    "y": 2.9026862045568005,
                    "z": 3.369490628625357
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.618420575003002
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:8",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 4.144257860119978,
                    "y": 47.78841189356899,
                    "z": 2.422031004705218
                },
                "scale": {
                    "x": 1.5056279558793502,
                    "y": 0.9114685402080243,
                    "z": 2.574374945033881
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.6322886166299746
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:9",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": 1.3205089375042007,
                    "y": 53.195234767081274,
                    "z": 2.2787420009242396
                },
                "scale": {
                    "x": 4.810655340916085,
                    "y": 2.9795990582530196,
                    "z": 3.7451833488407686
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.636120184277253
                }
            }
        },
        {
            "class_name": "Vehicle: Truck:10",
            "class_id": 7,
            "coordinates": {
                "position": {
                    "x": -2.3372585059914854,
                    "y": 55.35458816772734,
                    "z": 2.309349808891241
                },
                "scale": {
                    "x": 1.7584739344099969,
                    "y": 2.6945024844782703,
                    "z": 3.540029356579609
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": 2.6140092792938177
                }
            }
        },
        {
            "class_name": "Pedestrian: Police_officer:1",
            "class_id": 14,
            "coordinates": {
                "position": {
                    "x": -22.220091903131106,
                    "y": -5.721974975152989,
                    "z": 0.7716872369746568
                },
                "scale": {
                    "x": 1.1649735821544855,
                    "y": 0.6528685587950898,
                    "z": 1.7922125170513628
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": -2.183734612557144
                }
            }
        },
        {
            "class_name": "Pedestrian: Construction_Worker:1",
            "class_id": 12,
            "coordinates": {
                "position": {
                    "x": 47.87786579108797,
                    "y": 45.039920239716594,
                    "z": 1.1778544721776854
                },
                "scale": {
                    "x": 0.8775186301537322,
                    "y": 0.4993571979217251,
                    "z": 2.0770678551218342
                },
                "rotation": {
                    "x": 0,
                    "y": 0,
                    "z": -2.7086425568669847
                }
            }
        }
    ]
}
#6

@prisoner849 any lead on this ? :slight_smile:

#7

Is this looking correct?

изображение
изображение1088×860 27 KB

1 Like
#8

@prisoner849 yes absolutely. The boxes are just missing their text labels from the json which is represented by the key class_name, but I think the you have achieved the major part.

#9

I don’t do any transformations to the geometry of points. Then apply values of position, rotation and scales to a box, with the difference, that rotation on Z-axis has to be negated. That’s all.

#10

@prisoner849 the solution worked. Thank you so much for sticking to this problem with me. Cheers. Here is how it looks, I made the bboxes transparent.

pcd-scr
pcd-scr1361×625 112 KB

Any lead or idea or direction how to plot texts alongside with these boxes
Here is how generate my boxes :-

createBoundingBoxInstance(
    geometry: THREE.BoxGeometry,
    color: string | THREE.Color | number,
    coords: Coordinates,
    vector: THREE.Vector3,
    label: string,
    wireframe?:boolean
  ) {
    const material = new THREE.MeshBasicMaterial({ color, wireframe: wireframe, transparent:true,  opacity: 0.4,depthWrite: false,side: THREE.DoubleSide });
    const cube = new THREE.Mesh(geometry, material);

    cube.position.x = coords.position.x;
    cube.position.y = coords.position.y;
    cube.position.z = coords.position.z;

    cube.rotation.x = coords.rotation.x;
    cube.rotation.y = coords.rotation.y;
    cube.rotation.z = coords.rotation.z;

    cube.scale.x = coords.scale.x;
    cube.scale.y = coords.scale.y;
    cube.scale.z = coords.scale.z;
    this.scene.add(cube);
    // cube.updateWorldMatrix(true, false);
    // cube.getWorldPosition(vector);
    // vector.project(this.camera);
  }
#11

@prisoner849 I am opening this thread again because the issue I am facing right now is related to this topic. So as you know already I am plotting a pcd file. and then also plotting bboxes based on the supplied coordinates. Recently, I got this pcd file
0.zip (2.3 MB)
But on trying to plot the pcd file on the viewer, its showing nothing.

Capture
Capture1366×621 60.7 KB

The method I use to plot pcd is follows:

 private loadPCD() {
    const loader = new PCDLoader();
    loader.load(
      this.url,
      (points: THREE.Points) => {
        if (this.pcdLoaded) {
          return;
        }
        points.userData.boundingBoxAnnotationContent =
          this.boundingBoxAnnotationContent;
        const geometry: THREE.BufferGeometry = <THREE.BufferGeometry>(
          points.geometry
        );
        const material: THREE.PointsMaterial = <THREE.PointsMaterial>(
          points.material
        );
        //geometry.center();
        //geometry.rotateX(Math.PI);
        material.side = THREE.DoubleSide;
        material.color.setHex(this.defaults.hex);

        this.pointCloud = points;
        this.grid = this.setGridHelper();

        this.scene.add(this.grid);
        this.scene.add(this.pointCloud);

        this.populate3DBoundingBoxAnnotation();
        this.render();
        if (this.cameraControlsEnabled) this.animate();
        this.saveCameraControlState();
        this.centerOfLidar = this.getVisualCenterOfPolygon(geometry);
        const count = geometry.attributes.position.count;
        this.numberOfPointsLoaded = count;
        this.numberOfPointsShowing = this.numberOfPointsLoaded;

        this.isLoading = false;
        this.event.emit({
          trigger: "lidar-data-loaded-trigger",
          loaded: true,
          referencedAnnotation: {
            resourceHasAnnotatedJSON: this.resourceHasAnnotatedJSON,
            annotationContent: this.boundingBoxAnnotationContent,
          },
        });
        this.pcdLoaded = true;
        this.initStats();
        this.evaluateDistanceFromOrigin(geometry);
      },
      (progress) => {
        this.progress = Math.round((100 * progress.loaded) / progress.total);
      },
      (err) => {
        console.error(err);
        this.isLoading = false;
        this.event.emit({
          trigger: "lidar-data-loaded-trigger",
          loaded: false,
          referencedAnnotation: {
            resourceHasAnnotatedJSON: this.resourceHasAnnotatedJSON,
            annotationContent: this.boundingBoxAnnotationContent,
          },
        });
        this.loadingError = true;
      }
    );
  }

If I uncomment the geometry change in the above method, the point shows up on the screen but if I comment it, it does not show the points on screen. And in both cases, the bounding boxes with the applied coordinates are not shown as well.
Here is the bbox coordinate data with rotation.z negated already from the initial source.

[
    {
        "class_id": 7,
        "name": "Vehicle: Truck:2",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49701.430889590025,
                "y": 36669.48588375059,
                "z": 108.28206422988977
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -1.1588591747591366
            },
            "scale": {
                "x": 6.527588845825132,
                "y": 2.7053958469647084,
                "z": 3.088753093568613
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:3",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49803.019495930326,
                "y": 36710.521479010895,
                "z": 108.73881850510237
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": 0.5487445375123619
            },
            "scale": {
                "x": 12.30766479140657,
                "y": 3.3607588655188474,
                "z": 3.998681604635891
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:1",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49754.891900327755,
                "y": 36682.65824592283,
                "z": 108.6824678750207
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": 0.5331106969643833
            },
            "scale": {
                "x": 12.745152036697608,
                "y": 3.4765292357818036,
                "z": 3.7974907141831835
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:4",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49782.54922455341,
                "y": 36707.84639024677,
                "z": 108.72185596904264
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.7345906594565985
            },
            "scale": {
                "x": 12.555134377146214,
                "y": 3.065328958835853,
                "z": 4.1331076282010315
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:5",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49741.74598573557,
                "y": 36719.28439844109,
                "z": 109.1961204137063
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.6185516904570356
            },
            "scale": {
                "x": 12.492040840733727,
                "y": 2.9599363257716074,
                "z": 3.277454879289394
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:6",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49736.46146911247,
                "y": 36720.44107252165,
                "z": 109.13622880837758
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.592521994924967
            },
            "scale": {
                "x": 2.0797496300919427,
                "y": 2.2058505020229275,
                "z": 3.2304734340850843
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:7",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49735.16018826656,
                "y": 36723.93703218062,
                "z": 109.14892092301095
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.618420575003002
            },
            "scale": {
                "x": 2.570057617341567,
                "y": 2.9026862045568005,
                "z": 3.369490628625357
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:8",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49734.01925786012,
                "y": 36728.18294314357,
                "z": 109.14013250617006
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.6322886166299746
            },
            "scale": {
                "x": 1.5056279558793502,
                "y": 0.9114685402080243,
                "z": 2.574374945033881
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:9",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49731.195508937504,
                "y": 36733.58976601708,
                "z": 108.99684350238908
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.636120184277253
            },
            "scale": {
                "x": 4.810655340916085,
                "y": 2.9795990582530196,
                "z": 3.7451833488407686
            }
        }
    },
    {
        "class_id": 7,
        "name": "Vehicle: Truck:10",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49727.53774149401,
                "y": 36735.74911941773,
                "z": 109.02745131035608
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": -2.6140092792938177
            },
            "scale": {
                "x": 1.7584739344099969,
                "y": 2.6945024844782703,
                "z": 3.540029356579609
            }
        }
    },
    {
        "class_id": 14,
        "name": "Pedestrian: Police_officer:1",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49707.65490809687,
                "y": 36674.67255627485,
                "z": 107.4897887384395
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": 2.183734612557144
            },
            "scale": {
                "x": 1.1649735821544855,
                "y": 0.6528685587950898,
                "z": 1.7922125170513628
            }
        }
    },
    {
        "class_id": 12,
        "name": "Pedestrian: Construction_Worker:1",
        "val": [],
        "coordinates": {
            "position": {
                "x": 49777.75286579109,
                "y": 36725.43445148972,
                "z": 107.89595597364253
            },
            "rotation": {
                "x": 0,
                "y": 0,
                "z": 2.7086425568669847
            },
            "scale": {
                "x": 0.8775186301537322,
                "y": 0.4993571979217251,
                "z": 2.0770678551218342
            }
        }
    }
]

And this is how I create each bbox instance

createBoundingBoxInstance(
    geometry: THREE.BoxGeometry,
    color: string | THREE.Color | number,
    coords: Coordinates,
    vector: THREE.Vector3,
    label: string,
    wireframe?: boolean,
    transparent?: boolean,
    depthWrite?: boolean,
    doubleSide?: boolean,
    opacity?: number
  ) {
    const _color = color ? color : this.defaults.boundingBoxConfig.color;
    const _wireframe = wireframe
      ? wireframe
      : this.defaults.boundingBoxConfig.wireframe;
    const _transparent = transparent
      ? transparent
      : this.defaults.boundingBoxConfig.transparent;
    const _depthWrite = depthWrite
      ? depthWrite
      : this.defaults.boundingBoxConfig.depthWrite;
    const _side = doubleSide
      ? THREE.DoubleSide
      : this.defaults.boundingBoxConfig.side;
    const _opacity = opacity
      ? opacity
      : this.defaults.boundingBoxConfig.opacity;
    const material = new THREE.MeshBasicMaterial({
      color: _color,
      wireframe: _wireframe,
      transparent: _transparent,
      opacity: _opacity,
      depthWrite: _depthWrite,
      side: _side,
    });
    material.name = label;

    const cube = new THREE.Mesh(geometry, material);
    cube.visible = false; // initialize as an invisible bounding box.
    cube.position.x = coords.position.x;
    cube.position.y = coords.position.y;
    cube.position.z = coords.position.z;

    cube.rotation.x = coords.rotation.x;
    cube.rotation.y = coords.rotation.y;
    cube.rotation.z = coords.rotation.z;

    cube.scale.x = coords.scale.x;
    cube.scale.y = coords.scale.y;
    cube.scale.z = coords.scale.z;
    const myText = this.addTextToBBox(label);
    myText.sync();
    cube.add(myText);
    this.scene.add(cube);
    this.boundingBoxText.push(myText);
    cube.updateWorldMatrix(true, false);
    cube.getWorldPosition(vector);
    vector.project(this.camera);
  }

Note: previously with your solution it worked and plotted both pcd and bbox, but that time the pcd contents and the corresponding bbox coords were relatively smaller numbers, but this time both the pcd number and bbox coords are numerically very high in terms of coordinates, and that is why may be it is not showing up on the screen. Pls help me with a uniform approach for this which should work for any kind of valid pcd file and bbox coordinates.

Expected result is: https://global.discourse-cdn.com/standard17/uploads/threejs/original/3X/0/9/09148a89adedabee7fc529ef4f7ea12eb35fb6da.png

Thanks for your help all throughout this. If you want, I can open another thread on this.
CC @Mugen87 @mrdoob

#12

@prisoner849 Request your insights on the above issue.

#13

Why do you work with geometry of points, instead of the object of points? Find the center of the object and move your camera to it, not the other way round.

The dimensions of the object in millimeters in Three.js?
#14

@prisoner849 Paul, thank you for that response. What do you mean when you say object of points? I tried looking for this in the docs(three.js docs) but no luck, can you elaborate with a code snippet an object of points, then may be I can try finding the center of the object and move the camera. I understand the approach now.

#15

@prisoner849 Okay I understood what you mean by object of points. So I used that object of points but was not able to figure out how to move the camera to center of the lidar point cloud. Can you help me with that. I think if I can achieve that the bounding box placement would be solved as well.

And to answer your question : Why do you work with geometry of points
I followed this approach from the below link where the point cloud was loaded and its geometry was put to center three.js: examples/webgl_loader_pcd.html | Fossies

Now I understand the intent of geometry.center() it internally adjusts the points in such a way that any point irrespective of how big a float it is, would show up on the screen. Therefore, I added geometry.center() to make the point cloud display on the screen in all scenarios. But, with the geometry.center() approach I am unable display the bounding boxes on the screen as the coordinates are too high, so may be, I need to know what this geometry.center() does internally to adjust high coordinates so that they appear in screen.

But before that the solution that you are suggesting also makes sense, and I want to try that if you help me out with this. Paul, this is really very much appreciated, the way you have contributed to this issue so far.

@mrdoob @Mugen87 Also your views on this issue would be really appreciated, I have researched several things on this issue, but sadly there is no scenario that explains this issue.

#16

@prisoner849 @vielzutun.ch just wanted to let you guys know, I followed your solution of moving the camera to the center of the points object and it finally worked. The following method I wrote to accomplish this

PS. I am using the package Camera Controls camera-controls - npm for managing my camera controls over Orbit Controls.

 private projectPointCloudToCenter() {
    const c = this.getCenter();
    const cameraControlProjectionMeasurements:Dimensions={
      x:c.x,
      y:c.y,
      z:c.z
    }
    this.setCamera(cameraControlProjectionMeasurements)
    this.cameraControls.moveTo(cameraControlProjectionMeasurements.x, cameraControlProjectionMeasurements.y, cameraControlProjectionMeasurements.z);
    this.cameraControls.update(this.clock.getDelta());
  }

getCenter(): THREE.Vector3 {
    const points: THREE.Points = <THREE.Points>(
      this.getPointsWithBufferGeometry()
    );
    const geometry: THREE.BufferGeometry = <THREE.BufferGeometry>(
      points.geometry
    );
    geometry.computeBoundingBox();
    var center = new THREE.Vector3();
    geometry.boundingBox.getCenter(center);
    points.localToWorld(center);
    return center;
  }

The output has been finally achieved. The solution works for any floating point coordinates range in the point cloud file.

Capture
Capture1365×622 315 KB

Thank you for your help in making me understand the concepts of camera movement and point cloud projection.

Just want you to verify once again the method getCenter() by which I am finding the center of lidar, is it alright ?

1 Like