feat: the PointCloudViewer supports colored point cloud

rollup.config.js

@@ -121,7 +121,7 @@ const coreConfig = {
     }),
     process.env.ENV === 'development' &&
       serve({
-        contentBase: 'dist',
+        contentBase: './',
         port: 4321,
         headers: {
           'Access-Control-Allow-Origin': '*',

src/core/index.ts

@@ -2,18 +2,6 @@ import initPCLCore from '@/bind/build/pcl-core';
 import { ENVIRONMENT_IS_NODE } from '@/utils';
 import { Emscripten } from '@/types';
 
-export * from '@/constants';
-export * as fs from '@/modules/fs';
-export * from '@/modules/common';
-export * from '@/modules/io';
-export * from '@/modules/sample-consensus';
-export * from '@/modules/kdtree';
-export * from '@/modules/search';
-export * from '@/modules/filters';
-export * from '@/modules/keypoints';
-export * from '@/modules/segmentation';
-export * from '@/modules/registration';
-
 if (window.__PCLCore__) {
   console.warn('Multiple instances of pcl.js being imported.');
 } else {
@@ -75,3 +63,14 @@ function destroy() {
 }
 
 export { InitOptions, init, destroy, isInitialized };
+export * from '@/constants';
+export * as fs from '@/modules/fs';
+export * from '@/modules/common';
+export * from '@/modules/io';
+export * from '@/modules/sample-consensus';
+export * from '@/modules/kdtree';
+export * from '@/modules/search';
+export * from '@/modules/filters';
+export * from '@/modules/keypoints';
+export * from '@/modules/segmentation';
+export * from '@/modules/registration';

src/visualization/PointCloudViewer.ts

@@ -17,6 +17,7 @@ import { PCDLoader } from 'three/examples/jsm/loaders/PCDLoader';
 
 import { getCenter } from './utils';
 import { PointCloud } from '@/modules/common/PointCloud';
+import { XYZPointTypes, RGBPointTypes } from '@/modules/common/point-types';
 
 interface CloudProperties {
   sizeAttenuation: boolean;
@@ -71,15 +72,19 @@ class PointCloudViewer {
 
   // public function
 
-  public addPointCloud(cloud: PointCloud, id?: string) {
+  public addPointCloud(cloud: PointCloud<XYZPointTypes>, id?: string) {
     this.removePointCloud(id);
 
     const position: number[] = [];
+    const color: number[] = [];
     const { points } = cloud;
     const size = points.size;
     for (let i = 0; i < size; i++) {
-      const point = points.get(i);
-      position.push(point.x!, point.y!, point.z!);
+      const point = points.get(i) as RGBPointTypes;
+      position.push(point.x, point.y, point.z);
+      if (point.r !== undefined) {
+        color.push(point.r, point.g, point.b);
+      }
     }
 
     const geometry = new BufferGeometry();
@@ -89,6 +94,12 @@ class PointCloudViewer {
       geometry.setAttribute('position', new Float32BufferAttribute(position, 3));
     }
 
+    if (color.length) {
+      geometry.setAttribute('color', new Float32BufferAttribute(color, 3));
+      material.vertexColors = true;
+      material.needsUpdate = true;
+    }
+
     this.addPointCloudToScene(new Points(geometry, material), id);
   }
 
@@ -118,8 +129,9 @@ class PointCloudViewer {
     this.clouds.splice(index, 1);
   }
 
-  public setPointCloudProperties(properties?: Partial<CloudProperties>, id?: string) {
+  public setPointCloudProperties(properties?: Partial<CloudProperties>) {
     this.cloudProperties = { ...this.cloudProperties, ...properties };
+    const { id } = this.cloudProperties;
 
     if (!this.clouds.length) {
       return;
@@ -129,7 +141,7 @@ class PointCloudViewer {
       cloud.material.sizeAttenuation = this.cloudProperties.sizeAttenuation;
       cloud.material.size = this.cloudProperties.size;
       cloud.material.color.set(new Color(this.cloudProperties.color));
-      cloud.name = this.cloudProperties.id;
+      cloud.name = id;
     };
 
     if (id) {
@@ -153,12 +165,13 @@ class PointCloudViewer {
     far: number;
     position?: Pick<Vector3, 'x' | 'y' | 'z'>;
   }) {
-    this.camera.fov = properties.fov;
-    this.camera.aspect = properties.aspect;
-    this.camera.near = properties.near;
-    this.camera.far = properties.far;
-    if (properties.position) {
-      const { x, y, z } = properties.position;
+    const { fov, aspect, near, far, position } = properties;
+    this.camera.fov = fov ?? this.camera.fov;
+    this.camera.aspect = aspect ?? this.camera.aspect;
+    this.camera.near = near ?? this.camera.near;
+    this.camera.far = far ?? this.camera.far;
+    if (position) {
+      const { x, y, z } = position;
       this.camera.position.set(x, y, z);
     }
   }
@@ -174,8 +187,11 @@ class PointCloudViewer {
     target?: Pick<Vector3, 'x' | 'y' | 'z'>;
   }) {
     for (const key in properties) {
-      this.controls[key] = properties[key] ?? true;
+      if (properties[key] !== undefined) {
+        this.controls[key] = properties[key];
+      }
     }
+    this.controls.update();
   }
 
   public setAxesHelper(properties: { visible: boolean; size?: number }) {