点云数据切片及使用threejs加载

测试点云数数据大小 2.94G

cesium 加载：

数据处理：cesiumlab 点云切片->cesium 3Dtiles API 加载

threejs 加载

只支持 pcd 格式，故将 lsa 数据导入，在导出为了 pcd，在将数据直接转出 pcd 会直接闪退，不知是不是数据量的问题，还是电脑问题，然后试了下数据抽稀，在转化导出 200 多 M，然后直接加载，没有做 lod

Potree 加载 las

https://github.com/potree/potree
通过自带 Octree 优化加载性能

因为使用 Potree 加载的点云数据需要八叉树索引，而默认的 las 是没有构建有的（在软件上可视化时是会默认自动构建并可视化），所以需要对其进行转化为此库需要使用的相应的格式需要使用此库中自带的工具PotreeConverter 来转换

转换后的数据如上，原理类似于 3Dtiles 文件的组织

threejs+potree-core 切片加载

three.js 加载点云切片数据

实现原理是是先使用 potree 的八叉树索引构建工具将 las 数据转化为 octree 数据格式，然后使用网络 potree-core 库（potree 简化版)，并实在 three 中通过八叉树索引加载点云动态加载，代码修改参考于 potree-core 的示例代码库。

<template>
  <canvas id="gl"></canvas>
</template>
<script setup>
import GUI from "lil-gui";
import {
     
     
  AmbientLight,
  AxesHelper,
  DirectionalLight,
  BoxGeometry,
  Clock,
  GridHelper,
  LoadingManager,
  SpotLight,
  SpotLightHelper,
  Mesh,
  MeshLambertMaterial,
  MeshStandardMaterial,
  PCFSoftShadowMap,
  PerspectiveCamera,
  PlaneGeometry,
  Vector3,
  MeshBasicMaterial,
  PointLight,
  PointLightHelper,
  Scene,
  WebGLRenderer
} from "three";
import {
     
     OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import Stats from "three/examples/jsm/libs/stats.module";
import {
     
     PCDLoader} from "three/examples/jsm/loaders/PCDLoader.js"; // 注意是examples/jsm
import * as animations from "./utils/threeUtils/animations";
import {
     
     resizeRendererToDisplaySize} from "./utils/threeUtils/responsiveness";
import {
     
      PointCloudOctree, Potree } from 'potree-core'

import {
     
     onMounted, onUnmounted} from "vue";

const animation = {
     
     enabled: false, play: true};

let canvas;
let renderer;
let scene;
let loadingManager;
let ambientLight;
let pointLight;
let spotLight;
let directionalLight;
let cube;
let camera;
let cameraControls;
// let dragControls;
let axesHelper;
let pointLightHelper;
let spotLightHelper;
// let cameraHelper
let clock;
let stats;
let gui;
let points;
let pointClouds;
const potree = new Potree();

onMounted(() => {
     
     
  init();
  animate();
});

onUnmounted(() => {
     
     
  destroy();
  if (stats.dom && stats.dom.parentElement) {
     
     
    stats.dom.parentElement.removeChild(stats.dom);
  }
});

const init = () => {
     
     
  // renderer&&scene
  {
     
     
    canvas = document.querySelector("#gl");
    renderer = new WebGLRenderer({
     
     
      canvas, 
      antialias: true, 
      alpha: true,
      logarithmicDepthBuffer: false,//对数深度缓冲区
      precision: 'highp',//渲染精度
      premultipliedAlpha: true,