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:
But the expected result needs to be like this where the bounding boxes are rightly aligned with the points and are grounded:
Any help in this regard is appreciated.
