Three.js+pcl.js 实现Web端的点云处理+显示

import * as PCL from "https://cdn.jsdelivr.net/npm/pcl.js@1.16.0/dist/pcl.esm.js";
import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
import { PCDLoader } from 'three/addons/loaders/PCDLoader.js';
import { GUI } from 'three/addons/libs/lil-gui.module.min.js';

const container = document.getElementById('Panel1');
// 创建场景、相机、渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(80, container.offsetWidth / container.offsetHeight, 0.01, 10000000);
camera.position.set(0, 0, 1.5);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(container.offsetWidth, container.offsetHeight);
container.appendChild(renderer.domElement);
// 创建控制器
const controls = new OrbitControls(camera, renderer.domElement);

var gui = new GUI();
gui.title('示例1：点云过滤');
var attributesFolder = gui.addFolder('点云设置');
gui.domElement.style.left = '0.1%';
gui.domElement.style.position = 'absolute';

let cloud;                // 存储点云数据
let cloudOriginalData;    // 存储原始点云数据
let cloudFilteredData;    // 存储滤波后的点云数据

async function main() {
    // 异步获取点云数据
    const cloudBuffer = await fetch("./images/point_cloud.pcd").then((res) =>
        res.arrayBuffer()
    );

    // 初始化 pcl.js 库
    await PCL.init({
        url: `https://cdn.jsdelivr.net/npm/pcl.js/dist/pcl-core.wasm`
    });

    // 加载点云数据
    cloud = PCL.loadPCDData(cloudBuffer, PCL.PointXYZ);

    // 创建 StatisticalOutlierRemoval 滤波器
    const sor = new PCL.StatisticalOutlierRemoval();
    sor.setInputCloud(cloud);
    sor.setMeanK(40);
    sor.setStddevMulThresh(3.0);
    
    // 对点云进行滤波
    const cloudFiltered = sor.filter();

    // 保存滤波后和原始点云的数据（ASCII格式）
    cloudFilteredData = PCL.savePCDDataASCII(cloudFiltered);
    cloudOriginalData = PCL.savePCDDataASCII(cloud);

    // 绑定事件
    bindEvent();
}

// 调用 main 函数
main();

function showPointCloud(currentPointCloud) {
    // 将 ArrayBuffer 转换为字符串
    const decoder = new TextDecoder('utf-8');
    const pcdString = decoder.decode(new Uint8Array(currentPointCloud));

    // 从字符串创建 Blob
    const blob = new Blob([pcdString], { type: 'text/plain' });

    // 从 Blob 创建 URL
    const url = URL.createObjectURL(blob);

    // 创建点云加载器
    const loader = new PCDLoader();

    // 加载点云模型
    loader.load(url, function (points) {
        // 将点云几何居中
        points.geometry.center();
        points.geometry.rotateX(Math.PI);

        // 创建点云材质
        const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02, vertexColors: false });

        // 根据当前点云是原始数据还是滤波后的数据设置点云颜色
        if (currentPointCloud == cloudOriginalData) {
            material.color.setHex(0xad1010); // 设置为红色
        } else {
            material.color.setHex(0x1ea10c); // 设置为绿色
        }

        // 创建点云对象
        const pointCloud = new THREE.Points(points.geometry, material);
        scene.add(pointCloud);

        // 在 GUI 中添加点云相关设置
        const folder = attributesFolder.addFolder(`点云 0`);
        const text = { pointsNum: points.geometry.attributes.position.count, file: "初始pcd" };
        folder.add(text, 'file').name('文件');
        folder.add(text, 'pointsNum').name('点数');
        folder.add(material, 'size', 0.001, 0.03).name('点大小');
        folder.addColor(material, 'color').name('点颜色');
    });
}

function animate() {
    requestAnimationFrame(animate);

    // 渲染场景
    renderer.render(scene, camera);
}

animate();

let cloud;
let keypoints;

async function main() {
    const cloudBuffer = await fetch("./images/point_cloud.pcd").then((res) =>
        res.arrayBuffer()
    );

    await PCL.init({
        url: `https://cdn.jsdelivr.net/npm/pcl.js/dist/pcl-core.wasm`
    });

    cloud = PCL.loadPCDData(cloudBuffer, PCL.PointXYZ);
    const resolution = PCL.computeCloudResolution(cloud);
    const tree = new PCL.SearchKdTree();
    const iss = new PCL.ISSKeypoint3D();
    keypoints = new PCL.PointCloud();
    iss.setSearchMethod(tree);
    iss.setSalientRadius(6 * resolution);
    iss.setNonMaxRadius(4 * resolution);
    iss.setThreshold21(0.975);
    iss.setThreshold32(0.975);
    iss.setMinNeighbors(5);
    iss.setInputCloud(cloud);
    iss.compute(keypoints);

    cloudOriginalData = PCL.savePCDDataASCII(cloud);

    bindEvent();
}

function bindEvent() {
...
    switch (mode) {
        case "original2":
            showPointCloud(false);
            break;
        case "filtered2":
            showPointCloud(true);
            break;
...
}

function showPointCloud(showKeypoints) {
...
    const pos = [];

    // 如果需要展示关键点
    if (showKeypoints) {
        for (let i = 0; i < keypoints.points.size; ++i) {
            const point = keypoints.points.get(i);
            pos.push(point.x, point.y, point.z);
        }
    }

    // 创建关键点 PointsMaterial
    const geometry = new THREE.BufferGeometry();
    geometry.setAttribute('position', new THREE.Float32BufferAttribute(pos, 3));
    const keypointsMaterial = new THREE.PointsMaterial({ size: 0.05, color: 0xff0000 });
    const keypointsMesh = new THREE.Points(geometry, keypointsMaterial);

    // 创建点云的 PointsMaterial
    const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02, vertexColors: false });
    const pointCloud = new THREE.Points(points.geometry, material);

    // 创建一个组，将点云和关键点添加到组中
    const group = new THREE.Group();
    group.add(pointCloud);
    group.add(keypointsMesh);

    // 调整组的旋转，使其在显示时朝上
    group.rotation.set(Math.PI, 0, 0);

    // 计算组的包围盒
    const boundingBox = new THREE.Box3();
    boundingBox.setFromObject(group);

    // 获取包围盒中心
    const center = new THREE.Vector3();
    boundingBox.getCenter(center);

    // 计算平移向量，使组居中
    const translation = new THREE.Vector3();
    translation.subVectors(new THREE.Vector3(0, 0, 0), center);
    group.position.add(translation);

    // 将组添加到场景中
    scene.add(group);

    ...
    // 在GUI中添加关键点大小的调整
    folder.add(keypointsMaterial, 'size', 0.03, 0.1).name('关键点大小');
...
}

async function main() {
    const cloudBuffer = await fetch("./images/point_cloud.pcd").then((res) =>
        res.arrayBuffer()
    );

    await PCL.init({
        url: `https://cdn.jsdelivr.net/npm/pcl.js/dist/pcl-core.wasm`
    });

    cloud = PCL.loadPCDData(cloudBuffer, PCL.PointXYZ);

    const objectCenter = new PCL.PointXYZ(2, 0, 0);
    const foregroundPoints = new PCL.PointCloud();
    foregroundPoints.addPoint(objectCenter);

    const seg = new PCL.MinCutSegmentation();
    seg.setForegroundPoints(foregroundPoints);
    seg.setInputCloud(cloud);
    seg.setRadius(3.0433856);
    seg.setSigma(0.1);
    seg.setSourceWeight(0.8);
    seg.setNumberOfNeighbours(14);
    seg.extract();
    const coloredCloud = seg.getColoredCloud();

    cloudFilteredData = PCL.savePCDDataASCII(coloredCloud);
    cloudOriginalData = PCL.savePCDDataASCII(cloud);

    bindEvent();
}

let showVertColor = false;
// 当前是切割后的点云就显示点云颜色
if (currentPointCloud != cloudOriginalData) {
    showVertColor = true;
}

// 创建点云材质
const material = new THREE.PointsMaterial({ color: 0xffffff, size: 0.02, vertexColors: showVertColor });