@labelbee/lb-annotation 1.14.0-alpha.2 → 1.14.0-alpha.3

package/es/core/pointCloud/index.js

@@ -1,11 +1,968 @@
-import*as c from"three";import{toolStyleConverter as B,PerspectiveShiftUtils as b,EPerspectiveView as w,PointCloudUtils as k,DEFAULT_SPHERE_PARAMS as z}from"@labelbee/lb-utils";import D from"../../_virtual/highlightWorker.js";import L from"../../_virtual/filterBoxWorker.js";import{isInPolygon as N}from"../../utils/tool/polygonTool.js";import T from"../../utils/uuid.js";import F from"../../utils/MathUtils.js";import{PCDLoader as E}from"./PCDLoader.js";import{OrbitControls as R}from"./OrbitControls.js";import{PointCloudCache as W}from"./cache.js";import{getCuboidFromPointCloudBox as A}from"./matrix.js";export{createThreeMatrix4,getCuboidFromPointCloudBox,lidar2image,pointCloudLidar2image,rotatePoint,transferKitti2Matrix}from"./matrix.js";import"../../constant/tool.js";import"../scheduler.js";var Z=Object.defineProperty,H=Object.defineProperties,U=Object.getOwnPropertyDescriptors,O=Object.getOwnPropertySymbols,G=Object.prototype.hasOwnProperty,$=Object.prototype.propertyIsEnumerable,_=(f,t,e)=>t in f?Z(f,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):f[t]=e,M=(f,t)=>{for(var e in t||(t={}))G.call(t,e)&&_(f,e,t[e]);if(O)for(var e of O(t))$.call(t,e)&&_(f,e,t[e]);return f},P=(f,t)=>H(f,U(t)),S=(f,t,e)=>new Promise((r,n)=>{var s=o=>{try{i(e.next(o))}catch(h){n(h)}},a=o=>{try{i(e.throw(o))}catch(h){n(h)}},i=o=>o.done?r(o.value):Promise.resolve(o.value).then(s,a);i((e=e.apply(f,t)).next())});const X=30,j=new D({type:"module"});class Y{constructor({container:t,noAppend:e,isOrthographicCamera:r,orthographicParams:n,backgroundColor:s="#4C4C4C",config:a}){this.zAxisLimit=10,this.initCameraPosition=this.DEFAULT_INIT_CAMERA_POSITION,this.isOrthographicCamera=!1,this.pointsUuid="",this.pointCloudObjectName="pointCloud",this.rangeObjectName="range",this.showDirection=!0,this.addSphereToSense=(i,o="blue")=>{var h;const l=(h=i.id)!=null?h:T();this.removeObjectByName(l);const{radius:d,widthSegments:p,heightSegments:g}=z,{center:x}=i,u=new c.Group,m=new c.SphereGeometry(d,p,g),C=new c.MeshBasicMaterial({color:o}),y=new c.Mesh(m,C);y.position.set(x.x,x.y,x.z),u.add(y),u.name=l,this.scene.add(u)},this.generateSphere=i=>{const{fill:o}=B.getColorFromConfig({attribute:i.attribute},P(M({},this.config),{attributeConfigurable:!0}),{});this.addSphereToSense(i,o),this.render()},this.generateSpheres=i=>{i.forEach(o=>{const{fill:h}=B.getColorFromConfig({attribute:o.attribute},P(M({},this.config),{attributeConfigurable:!0}),{});this.addSphereToSense(o,h)}),this.render()},this.AddBoxToSense=(i,o=16777215)=>{var h;const l=(h=i.id)!=null?h:T();this.removeObjectByName(l);const{center:d,width:p,height:g,depth:x,rotation:u}=i,m=new c.Group,C=new c.BoxGeometry(p,g,x),y=new c.MeshBasicMaterial({color:"blue"}),v=new c.Mesh(C,y),I=new c.BoxHelper(v,o),V=this.generateBoxArrow(i);m.add(I),m.add(V),d&&m.position.set(d.x,d.y,d.z),u&&m.rotation.set(0,0,u),m.name=l,this.scene.add(m)},this.applyCameraTarget=i=>{if(this.camera.type==="OrthographicCamera"&&i){const o=this.getOrthographicCameraTarget(i);this.updateCameraZoom(i.zoom),this.updateCamera(i.position,o)}},this.overridePointShader=i=>{i.vertexShader=`
+import * as THREE from 'three';
+import { toolStyleConverter, PerspectiveShiftUtils, EPerspectiveView, PointCloudUtils, DEFAULT_SPHERE_PARAMS } from '@labelbee/lb-utils';
+import WorkerFactory from '../../_virtual/highlightWorker.js';
+import WorkerFactory$1 from '../../_virtual/filterBoxWorker.js';
+import { isInPolygon } from '../../utils/tool/polygonTool.js';
+import uuid from '../../utils/uuid.js';
+import MathUtils from '../../utils/MathUtils.js';
+import { PCDLoader } from './PCDLoader.js';
+import { OrbitControls } from './OrbitControls.js';
+import { PointCloudCache } from './cache.js';
+import { getCuboidFromPointCloudBox } from './matrix.js';
+export { createThreeMatrix4, getCuboidFromPointCloudBox, lidar2image, pointCloudLidar2image, rotatePoint, transferKitti2Matrix } from './matrix.js';
+import '../../constant/tool.js';
+import '../scheduler.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {enumerable: true, configurable: true, writable: true, value}) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+const DEFAULT_DISTANCE = 30;
+const highlightWorker = new WorkerFactory({type: "module"});
+class PointCloud {
+  constructor({
+    container,
+    noAppend,
+    isOrthographicCamera,
+    orthographicParams,
+    backgroundColor = "#4C4C4C",
+    config
+  }) {
+    this.zAxisLimit = 10;
+    this.initCameraPosition = this.DEFAULT_INIT_CAMERA_POSITION;
+    this.isOrthographicCamera = false;
+    this.pointsUuid = "";
+    this.pointCloudObjectName = "pointCloud";
+    this.rangeObjectName = "range";
+    this.showDirection = true;
+    this.addSphereToSense = (sphereParams, color = "blue") => {
+      var _a;
+      const id = (_a = sphereParams.id) != null ? _a : uuid();
+      this.removeObjectByName(id);
+      const {radius, widthSegments, heightSegments} = DEFAULT_SPHERE_PARAMS;
+      const {center} = sphereParams;
+      const group = new THREE.Group();
+      const spGeo = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
+      const spMaterial = new THREE.MeshBasicMaterial({color});
+      const sphere = new THREE.Mesh(spGeo, spMaterial);
+      sphere.position.set(center.x, center.y, center.z);
+      group.add(sphere);
+      group.name = id;
+      this.scene.add(group);
+    };
+    this.generateSphere = (sphereParams) => {
+      const {fill} = toolStyleConverter.getColorFromConfig({attribute: sphereParams.attribute}, __spreadProps(__spreadValues({}, this.config), {attributeConfigurable: true}), {});
+      this.addSphereToSense(sphereParams, fill);
+      this.render();
+    };
+    this.generateSpheres = (spheres) => {
+      spheres.forEach((sphere) => {
+        const {fill} = toolStyleConverter.getColorFromConfig({attribute: sphere.attribute}, __spreadProps(__spreadValues({}, this.config), {attributeConfigurable: true}), {});
+        this.addSphereToSense(sphere, fill);
+      });
+      this.render();
+    };
+    this.AddBoxToSense = (boxParams, color = 16777215) => {
+      var _a;
+      const id = (_a = boxParams.id) != null ? _a : uuid();
+      this.removeObjectByName(id);
+      const {center, width, height, depth, rotation} = boxParams;
+      const group = new THREE.Group();
+      const geometry = new THREE.BoxGeometry(width, height, depth);
+      const material = new THREE.MeshBasicMaterial({color: "blue"});
+      const cube = new THREE.Mesh(geometry, material);
+      const box = new THREE.BoxHelper(cube, color);
+      const arrow = this.generateBoxArrow(boxParams);
+      group.add(box);
+      group.add(arrow);
+      if (center) {
+        group.position.set(center.x, center.y, center.z);
+      }
+      if (rotation) {
+        group.rotation.set(0, 0, rotation);
+      }
+      group.name = id;
+      this.scene.add(group);
+    };
+    this.applyCameraTarget = (camera) => {
+      if (this.camera.type !== "OrthographicCamera") {
+        return;
+      }
+      if (camera) {
+        const cameraTarget = this.getOrthographicCameraTarget(camera);
+        this.updateCameraZoom(camera.zoom);
+        this.updateCamera(camera.position, cameraTarget);
+      }
+    };
+    this.overridePointShader = (shader) => {
+      shader.vertexShader = `
     attribute float sizes;
     attribute float visibility;
     varying float vVisible;
-  ${i.vertexShader}`.replace("gl_PointSize = size;",`gl_PointSize = size;
+  ${shader.vertexShader}`.replace(`gl_PointSize = size;`, `gl_PointSize = size;
       vVisible = visibility;
-    `),i.fragmentShader=`
+    `);
+      shader.fragmentShader = `
     varying float vVisible;
-  ${i.fragmentShader}`.replace("#include <clipping_planes_fragment>",`
+  ${shader.fragmentShader}`.replace(`#include <clipping_planes_fragment>`, `
       if (vVisible < 0.5) discard;
-    #include <clipping_planes_fragment>`)},this.loadPCDFile=(i,o)=>S(this,null,function*(){this.clearPointCloud(),this.currentPCDSrc=i;const{points:h,color:l}=yield this.cacheInstance.loadPCDFile(i),d=new c.BufferGeometry;d.setAttribute("position",new c.BufferAttribute(h,3)),d.setAttribute("color",new c.BufferAttribute(l,3));const p=new c.Points(d);this.renderPointCloud(p,o)}),this.loadPCDFileByBox=(i,o,h)=>S(this,null,function*(){const l=(g,x)=>S(this,null,function*(){const{width:u=0,height:m=0,depth:C=0}=h!=null?h:{},y=yield this.filterPointsByBox(P(M({},o),{width:o.width+u,height:o.height+m,depth:o.depth+C}),g,x);if(!y){console.error("filter Error");return}this.clearPointCloud(),this.currentPCDSrc=i;const v=new c.Points(y.geometry);v.name=this.pointCloudObjectName,this.scene.add(v),this.render()}),{points:d,color:p}=yield this.cacheInstance.loadPCDFile(i);l(d,p)}),this.generateRange=i=>{const o=this.createRange(i);this.scene.add(o)},this.generateBoxArrow=({width:i})=>{const o=new c.Vector3(1,0,0),h=new c.Vector3(i/2,0,0),l=2,d=16776960,p=new c.ArrowHelper(o,h,l,d);return p.visible=this.showDirection,p},this.generateBoxTrackID=i=>{if(!i.trackID)return;const o=new c.Texture(this.getTextCanvas(i.trackID.toString()));o.needsUpdate=!0;const h=new c.SpriteMaterial({map:o,depthWrite:!1}),l=new c.Sprite(h);return l.scale.set(5,5,5),l.position.set(-i.width/2,0,i.depth/2+.5),l},this.applyZAxisPoints=i=>{this.zAxisLimit=i,this.filterZAxisPoints(),this.render()},this.updatePointSize=i=>{const o=this.scene.getObjectByName(this.pointCloudObjectName);if(!o)return;const h=o.material.size;i?o.material.size=Math.min(h*1.2,10):o.material.size=Math.max(h/1.2,1),this.render()},this.container=t,this.renderer=new c.WebGLRenderer({antialias:!0}),this.backgroundColor=s,this.config=a,r&&n?(this.isOrthographicCamera=!0,this.camera=new c.OrthographicCamera(n.left,n.right,n.top,n.bottom,n.near,n.far)):this.camera=new c.PerspectiveCamera(30,this.containerWidth/this.containerHeight,1,1e3),this.initCamera(),this.scene=new c.Scene,this.controls=new R(this.camera,this.renderer.domElement),this.pcdLoader=new E,this.axesHelper=new c.AxesHelper(1e3),this.scene.add(this.camera),e||t.appendChild(this.renderer.domElement),this.init(),this.cacheInstance=W.getInstance()}get DEFAULT_INIT_CAMERA_POSITION(){return new c.Vector3(-.01,0,10)}get containerWidth(){return this.container.clientWidth}get containerHeight(){return this.container.clientHeight}setInitCameraPosition(t){this.initCameraPosition=t}setConfig(t){this.config=t}initOrthographicCamera(t){if(this.camera.type!=="OrthographicCamera")return;const{left:e,right:r,top:n,bottom:s,near:a,far:i}=t;this.camera.left=e,this.camera.right=r,this.camera.top=n,this.camera.bottom=s,this.camera.near=a,this.camera.far=i,this.camera.updateProjectionMatrix()}initPerspectiveCamera(){this.camera.type==="PerspectiveCamera"&&(this.camera.fov=30,this.camera.aspect=this.containerWidth/this.containerHeight,this.camera.near=1,this.camera.far=1e3,this.camera.updateProjectionMatrix())}initCamera(){const{camera:t}=this;if(this.isOrthographicCamera){const{x:e,y:r,z:n}=this.initCameraPosition;t.position.set(e,r,n)}else t.position.set(-1,0,500);t.up.set(0,0,1)}initControls(){const{controls:t}=this;t.addEventListener("change",()=>{this.render()}),this.setDefaultControls()}setDefaultControls(){const{controls:t}=this,e=[0,0,0];t.target=new c.Vector3(...e),t.addEventListener("change",()=>{this.render()}),t.maxPolarAngle=Math.PI/2,t.update()}initRenderer(){const{renderer:t}=this;t.setPixelRatio(window.devicePixelRatio),t.setSize(this.containerWidth,this.containerHeight)}init(){const{scene:t}=this;t.background=new c.Color(this.backgroundColor),this.initControls(),this.initRenderer()}removeObjectByName(t){const e=this.scene.getObjectByName(t);e&&e.removeFromParent()}generateBox(t,e=16777215){const r=e;this.AddBoxToSense(t,r),this.render()}getAllAttributeColor(t){return t.reduce((e,r)=>(e[r.attribute]=B.getColorFromConfig({attribute:r.attribute},P(M({},this.config),{attributeConfigurable:!0}),{}),e),{})}generateBoxes(t){t.forEach(e=>{this.generateBox(e)}),this.render()}getOrthographicCamera(t){const{center:e,width:r,height:n}=t,s=10,a=e.x-r/2-s,i=e.x-r/2+s,o=e.y+n/2+s,h=e.y-n/2-s,l=100,d=-100,p=500/l;return{left:a,right:i,top:o,bottom:h,near:l,far:d,zoom:p}}updateCameraZoom(t){this.camera.zoom=t,this.camera.updateProjectionMatrix()}updateCameraByBox(t,e,r){const{center:n,width:s,height:a,depth:i,rotation:o}=t,h=this.getCameraVector(n,o,{width:s,height:a,depth:i},e);return r?(this.updateCamera(r,n),new c.Vector3(r.x,r.y,r.z)):(this.updateCamera(h,n),h)}updateCameraBySphere(t,e){const{center:r}=t,{radius:n}=z,s=this.getCameraVector(r,0,{width:n*2,height:n*2,depth:n*2},e);return this.updateCamera(s,r),s}updateOrthoCamera(t,e){const r=this.updateCameraByBox(t,e);return this.camera.zoom=1,this.camera.updateProjectionMatrix(),{cameraPositionVector:r}}updateOrthoCameraBySphere(t,e){const r=this.updateCameraBySphere(t,e);return this.camera.zoom=1,this.camera.updateProjectionMatrix(),{cameraPositionVector:r}}updateTopCamera(){this.setInitCameraPosition(this.DEFAULT_INIT_CAMERA_POSITION),this.camera.zoom=1,this.initCamera(),this.setDefaultControls(),this.camera.updateProjectionMatrix(),this.render()}updateCamera(t,e){this.camera.position.set(t.x,t.y,t.z),this.controls.target=new c.Vector3(e.x,e.y,e.z),this.controls.update()}resetCamera(){this.updateCamera(this.DEFAULT_INIT_CAMERA_POSITION,{x:0,y:0,z:0})}getOrthographicCameraTarget(t){const e=new c.Vector3(0,0,-1).applyQuaternion(t.quaternion);return t.position.clone().add(e)}createThreeMatrix4(t){return new c.Matrix4().set(...t)}filterPointsByBox(t,e,r){var n,s,a;if(!e){const i=this.scene.getObjectByName(this.pointCloudObjectName);if(!i)return console.error("There is no corresponding point cloud object"),Promise.resolve(void 0);e=(a=(s=(n=i==null?void 0:i.geometry)==null?void 0:n.attributes)==null?void 0:s.position)==null?void 0:a.array}if(window.Worker){const{zMin:i,zMax:o,polygonPointList:h}=A(t),l=e;r=r!=null?r:new Float32Array([]);const d={boxParams:t,zMin:i,zMax:o,polygonPointList:h,color:r,position:l};return new Promise(p=>{const g=new L;g.postMessage(d),g.onmessage=x=>{const{color:u,position:m,num:C}=x.data,y=new c.BufferGeometry;y.setAttribute("position",new c.Float32BufferAttribute(m,3)),y.setAttribute("color",new c.Float32BufferAttribute(u,3)),y.computeBoundingSphere(),g.terminate(),p({geometry:y,num:C})}})}return Promise.resolve(void 0)}getCameraVector(t,e,r,n=w.Front,s=X){let a=b.frontViewMatrix4(s);switch(n){case w.Front:break;case w.Back:a=b.backViewMatrix4(s);break;case w.Left:a=b.leftViewMatrix4(s);break;case w.Right:a=b.rightViewMatrix4(s);break;case w.Top:a=b.topViewMatrix4(s);break;case w.LFT:a=b.leftFrontTopViewMatrix4(s,r);break;case w.RBT:a=b.rightBackTopViewMatrix4(s,r);break}const i=this.createThreeMatrix4(a),o=new c.Matrix4().makeTranslation(-t.x,-t.y,-t.z),h=new c.Matrix4().makeTranslation(t.x,t.y,t.z),l=new c.Matrix4().makeRotationZ(e);return new c.Vector3(t.x,t.y,t.z).clone().applyMatrix4(i).applyMatrix4(o).applyMatrix4(l).applyMatrix4(h)}createRange(t){this.removeObjectByName(this.rangeObjectName);const r=new c.EllipseCurve(0,0,t,t,0,2*Math.PI,!1,0).getPoints(50),n=new c.BufferGeometry().setFromPoints(r),s=new c.LineBasicMaterial({color:16711680}),a=new c.Line(n,s);return a.name=this.rangeObjectName,a}renderPointCloud(t,e){t.name=this.pointCloudObjectName;const r=new c.PointsMaterial({vertexColors:!0});r.onBeforeCompile=this.overridePointShader,r.size=1.2,e&&this.generateRange(e),this.pointsUuid=t.uuid,t.material=r,this.filterZAxisPoints(t),this.scene.add(t),this.render()}clearPointCloud(){this.removeObjectByName(this.pointCloudObjectName)}clearPointCloudAndRender(){this.clearPointCloud(),this.render()}highlightOriginPointCloud(t){const e=this.scene.getObjectByName(this.pointCloudObjectName);if(!!e)return this.highlightPCDSrc=this.currentPCDSrc,new Promise(r=>{if(window.Worker){const s=(t?[...t]:[]).map(o=>A(o)),a=this.getAllAttributeColor(s),i={cuboidList:s,position:e.geometry.attributes.position.array,color:e.geometry.attributes.color.array,colorList:a};j.postMessage(i),j.onmessage=o=>{const{color:h}=o.data,l=new c.BufferAttribute(h,3);this.highlightPCDSrc&&(this.cacheInstance.updateColor(this.highlightPCDSrc,h),this.highlightPCDSrc=void 0),l.needsUpdate=!0,e.geometry.setAttribute("color",l),r(h),this.render()}}})}updateColor(t){const e=this.scene.getObjectByName(this.pointCloudObjectName);if(e){const r=new c.BufferAttribute(t,3);r.needsUpdate=!0,e.geometry.setAttribute("color",r),this.render()}}setShowDirection(t){this.showDirection=t,this.scene.children.forEach(e=>{e.type==="Group"&&e.children.forEach(r=>{r.type==="ArrowHelper"&&(r.visible=t)})}),this.render()}getTextCanvas(t){const e=document.createElement("canvas"),r=e.getContext("2d");return r&&(r.font=`${50}px " bold`,r.fillStyle="white",r.textAlign="center",r.textBaseline="middle",r.fillText(t,e.width/2,e.height/2)),e}filterNoise(t){let e=[...t];e.sort((d,p)=>d.z-p.z);const r=Math.floor(e.length*.05),n=e[r];e=e.filter(({z:d})=>d>n.z+.1);const s=.005,a=Math.floor(e.length*(1-s));e=e.slice(0,a),e.sort((d,p)=>d.x-p.x);const i=Math.floor(e.length*s),o=Math.floor(e.length*(1-s));e=e.slice(i,o),e.sort((d,p)=>d.y-p.y);const h=Math.floor(e.length*s),l=Math.floor(e.length*(1-s));return e=e.slice(h,l),e.length>100?e:t}getFittedCoordinates(t,e){const r=[];let n=[...t,t[0]];e.forEach(({x:i,y:o})=>{t.forEach((h,l)=>{const d=n[l+1],p=F.getFootOfPerpendicular({x:i,y:o},h,d,!1,!0).length;(!r[l]||p<r[l].distance)&&(r[l]={distance:p,point:{x:i,y:o}})})}),n=[t[t.length-1],...t,t[0]];const s=[r[r.length-1],...r];return t.map((i,o)=>{const h=n[o],l=n[o+1],d=n[o+2];return k.getIntersectionBySlope({p1:s[o].point,k1:(h.y-l.y)/(h.x-l.x),p2:s[o+1].point,k2:(l.y-d.y)/(l.x-d.x)})})}getSensesPointZAxisInPolygon(t,e,r){var n,s,a;const i=this.scene.children.find(u=>u.uuid===this.pointsUuid);let o=0,h=0,l=0,d=0,p=[],g=[];const x=((a=(s=(n=i==null?void 0:i.geometry)==null?void 0:n.attributes)==null?void 0:s.position)==null?void 0:a.array)||[];for(let u=0;u<x.length;u+=3){const m=x[u],C=x[u+1],y=x[u+2];N({x:m,y:C},t)&&(y||y===0)&&g.push({x:m,y:C,z:y})}return g.length?(r&&(g=this.filterNoise(g),p=this.getFittedCoordinates(t,g)),g.sort((u,m)=>u.z-m.z),o=g[0].z-.01,h=g[g.length-1].z+.01,d=g.length,e&&(l=g.filter(({z:u})=>u>=e[0]&&u<=e[1]).length),{maxZ:h,minZ:o,count:l,zCount:d,fittedCoordinates:p}):{maxZ:h,minZ:o,count:l,zCount:d,fittedCoordinates:p}}getBasicCoordinate2Canvas(t){const e=this.containerWidth/2,r=this.containerHeight/2;return{x:t.x*e+e,y:t.y*r+r,z:t.z}}get basicCoordinate2CanvasMatrix4(){const t=this.containerWidth/2,e=this.containerHeight/2;return new c.Matrix4().set(t,0,0,t,0,e,0,e,0,0,1,0,0,0,0,1)}getCanvas2BasicCoordinate(t){const e=this.containerWidth/2,r=this.containerHeight/2;return new c.Vector3(t.x/e-e/2,-(t.y/r-r/2),1)}getPolygonSidePoints(t){const{center:{x:e,y:r,z:n},height:s,width:a,depth:i}=t,o={x:e+a/2,y:r+s/2,z:n-i/2},h={x:e+a/2,y:r+s/2,z:n+i/2},l={x:e-a/2,y:r+s/2,z:n+i/2},d={x:e-a/2,y:r+s/2,z:n-i/2};return[o,h,l,d]}getPolygonBackPoints(t){const{center:{x:e,y:r,z:n},height:s,width:a,depth:i}=t,o={x:e-a/2,y:r+s/2,z:n+i/2},h={x:e-a/2,y:r+s/2,z:n-i/2},l={x:e-a/2,y:r-s/2,z:n-i/2},d={x:e-a/2,y:r-s/2,z:n+i/2};return[o,h,l,d]}getPolygonTopPoints(t){const{center:{x:e,y:r,z:n},height:s,width:a,depth:i}=t,o={x:e+a/2,y:r+s/2,z:n+i/2},h={x:e+a/2,y:r-s/2,z:n+i/2},l={x:e-a/2,y:r-s/2,z:n+i/2},d={x:e-a/2,y:r+s/2,z:n+i/2};return[o,h,l,d]}getModelTransformationMatrix(t){const{center:{x:e,y:r,z:n},rotation:s}=t,a=new c.Matrix4().makeTranslation(-e,-r,-n),i=new c.Matrix4().makeTranslation(e,r,n),o=new c.Matrix4().makeRotationZ(s);return new c.Matrix4().multiply(i).multiply(o).multiply(a)}getBoxSidePolygon2DCoordinate(t){return this.getBoxPolygon2DCoordinate(t,w.Left)}getBoxBackPolygon2DCoordinate(t){return this.getBoxPolygon2DCoordinate(t,w.Back)}getSphereSidePoint2DCoordinate(t){return this.getSpherePoint2DCoordinate(t)}getSphereBackPoint2DCoordinate(t){return this.getSpherePoint2DCoordinate(t)}boxParams2ViewPolygon(t,e){switch(e){case w.Left:return this.getPolygonSidePoints(t);case w.Back:return this.getPolygonBackPoints(t);default:return this.getPolygonTopPoints(t)}}getBoxPolygon2DCoordinate(t,e){const r=this.boxParams2ViewPolygon(t,e),{width:n,height:s}=t,a=new c.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix),i=new c.Matrix4().premultiply(this.getModelTransformationMatrix(t)).premultiply(a).premultiply(this.basicCoordinate2CanvasMatrix4);this.sideMatrix=i;const o=r.map(d=>new c.Vector3(d.x,d.y,d.z)).map(d=>d.applyMatrix4(this.sideMatrix)),h=this.containerWidth/n,l=this.containerHeight/s;return{polygon2d:o,zoom:Math.min(h,l)/2}}getSpherePoint2DCoordinate(t){const{center:e,attribute:r,id:n,valid:s}=t,{radius:a}=z,i={center:e,attribute:r,id:n,valid:s,width:a*2,height:a*2,depth:a*2,rotation:0},o=new c.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix),h=new c.Matrix4().premultiply(this.getModelTransformationMatrix(i)).premultiply(o).premultiply(this.basicCoordinate2CanvasMatrix4);this.sideMatrix=h;const l=new c.Vector3(e.x,e.y,e.z).applyMatrix4(this.sideMatrix),d=this.containerWidth/(a*2),p=this.containerHeight/(a*2);return{point2d:l,zoom:Math.min(d,p)/2}}getSphereTopPoint2DCoordinate(t){const{center:e}=t,{radius:r}=z,n={x:-(e.y-this.containerWidth/2),y:-(e.x-this.containerHeight/2)},s=this.containerWidth/(r*2),a=this.containerHeight/(r*2);return{point2d:n,zoom:Math.min(s,a)/2}}getBoxTopPolygon2DCoordinate(t){const{width:e,height:r}=t,s=this.getPolygonTopPoints(t).map(o=>new c.Vector3(o.x,o.y,o.z)).map(o=>o.applyMatrix4(this.getModelTransformationMatrix(t))).map(o=>({x:o.y,y:o.x})).map(o=>({x:-(o.x-this.containerWidth/2),y:-(o.y-this.containerHeight/2)})),a=this.containerWidth/e,i=this.containerHeight/r;return{polygon2d:s,zoom:Math.min(a,i)/2}}getNewBoxBySideUpdate(t,e,r,n){const s=new c.Matrix4().makeRotationZ(n.rotation),a=new c.Vector3(-t.x,0,0).applyMatrix4(s);let i=n;return i.center={x:i.center.x+a.x,y:i.center.y+a.y,z:i.center.z-t.z},i=P(M({},i),{width:i.width+e,height:i.height,depth:i.depth+r}),{newBoxParams:i}}getNewBoxByBackUpdate(t,e,r,n){const s=new c.Matrix4().makeRotationZ(n.rotation),a=new c.Vector3(0,-t.x,0).applyMatrix4(s);let i=n;return i.center={x:i.center.x+a.x,y:i.center.y+a.y,z:i.center.z-t.z},i=P(M({},i),{width:i.width,height:i.height+e,depth:i.depth+r}),{newBoxParams:i}}getNewBoxBySideUpdateByPoints(t,e,r,n){var s;const a=(s=this.sideMatrix)==null?void 0:s.invert();if(!this.sideMatrix||!a){console.error("No sideMatrix");return}this.camera.zoom=1,this.camera.updateProjectionMatrix();const i=t.map(m=>new c.Vector3(m.x,m.y,m.z)).map(m=>m.applyMatrix4(a)),[o,h,l,d]=i,p=Math.max(Math.abs(o.x-l.x),Math.abs(o.x-h.x)),x=h.add(d).applyMatrix3(new c.Matrix3().set(1/2,0,0,0,1/2,0,0,0,1/2)).clone().applyMatrix3(new c.Matrix3().set(-1,0,0,0,-1,0,0,0,-1)).add(new c.Vector3(n.center.x,n.center.y,n.center.z));return{newBoxParams:P(M({},n),{center:{x:n.center.x-x.x,y:n.center.y-x.y,z:n.center.z-r},width:p,height:n.height,depth:n.depth+e,rotation:n.rotation})}}filterZAxisPoints(t){const e=t||this.scene.children.find(r=>r.uuid===this.pointsUuid);if(e){const{attributes:r}=e.geometry,{position:n}=r,s=[],{count:a}=n;for(let i=0;i<a;i++){const o=n.getZ(i);s.push(o>this.zAxisLimit?0:1)}e.geometry.setAttribute("visibility",new c.Float32BufferAttribute(s,1)),e.geometry.attributes.visibility.needsUpdate=!0}}render(){this.renderer.render(this.scene,this.camera)}}export{Y as PointCloud};
+    #include <clipping_planes_fragment>`);
+    };
+    this.loadPCDFile = (src, radius) => __async(this, null, function* () {
+      this.clearPointCloud();
+      this.currentPCDSrc = src;
+      const {points, color} = yield this.cacheInstance.loadPCDFile(src);
+      const geometry = new THREE.BufferGeometry();
+      geometry.setAttribute("position", new THREE.BufferAttribute(points, 3));
+      geometry.setAttribute("color", new THREE.BufferAttribute(color, 3));
+      const newPoints = new THREE.Points(geometry);
+      this.renderPointCloud(newPoints, radius);
+    });
+    this.loadPCDFileByBox = (src, boxParams, scope) => __async(this, null, function* () {
+      const cb = (points2, color2) => __async(this, null, function* () {
+        const {width = 0, height = 0, depth = 0} = scope != null ? scope : {};
+        const filterData = yield this.filterPointsByBox(__spreadProps(__spreadValues({}, boxParams), {
+          width: boxParams.width + width,
+          height: boxParams.height + height,
+          depth: boxParams.depth + depth
+        }), points2, color2);
+        if (!filterData) {
+          console.error("filter Error");
+          return;
+        }
+        this.clearPointCloud();
+        this.currentPCDSrc = src;
+        const newPoints = new THREE.Points(filterData.geometry);
+        newPoints.name = this.pointCloudObjectName;
+        this.scene.add(newPoints);
+        this.render();
+      });
+      const {points, color} = yield this.cacheInstance.loadPCDFile(src);
+      cb(points, color);
+    });
+    this.generateRange = (radius) => {
+      const circle = this.createRange(radius);
+      this.scene.add(circle);
+    };
+    this.generateBoxArrow = ({width}) => {
+      const dir = new THREE.Vector3(1, 0, 0);
+      const origin = new THREE.Vector3(width / 2, 0, 0);
+      const arrowLen = 2;
+      const hex = 16776960;
+      const arrowHelper = new THREE.ArrowHelper(dir, origin, arrowLen, hex);
+      arrowHelper.visible = this.showDirection;
+      return arrowHelper;
+    };
+    this.generateBoxTrackID = (boxParams) => {
+      if (!boxParams.trackID) {
+        return;
+      }
+      const texture = new THREE.Texture(this.getTextCanvas(boxParams.trackID.toString()));
+      texture.needsUpdate = true;
+      const sprite = new THREE.SpriteMaterial({map: texture, depthWrite: false});
+      const boxID = new THREE.Sprite(sprite);
+      boxID.scale.set(5, 5, 5);
+      boxID.position.set(-boxParams.width / 2, 0, boxParams.depth / 2 + 0.5);
+      return boxID;
+    };
+    this.applyZAxisPoints = (zAxisLimit) => {
+      this.zAxisLimit = zAxisLimit;
+      this.filterZAxisPoints();
+      this.render();
+    };
+    this.updatePointSize = (zoomIn) => {
+      const points = this.scene.getObjectByName(this.pointCloudObjectName);
+      if (!points) {
+        return;
+      }
+      const preSize = points.material.size;
+      if (zoomIn) {
+        points.material.size = Math.min(preSize * 1.2, 10);
+      } else {
+        points.material.size = Math.max(preSize / 1.2, 1);
+      }
+      this.render();
+    };
+    this.container = container;
+    this.renderer = new THREE.WebGLRenderer({antialias: true});
+    this.backgroundColor = backgroundColor;
+    this.config = config;
+    if (isOrthographicCamera && orthographicParams) {
+      this.isOrthographicCamera = true;
+      this.camera = new THREE.OrthographicCamera(orthographicParams.left, orthographicParams.right, orthographicParams.top, orthographicParams.bottom, orthographicParams.near, orthographicParams.far);
+    } else {
+      this.camera = new THREE.PerspectiveCamera(30, this.containerWidth / this.containerHeight, 1, 1e3);
+    }
+    this.initCamera();
+    this.scene = new THREE.Scene();
+    this.controls = new OrbitControls(this.camera, this.renderer.domElement);
+    this.pcdLoader = new PCDLoader();
+    this.axesHelper = new THREE.AxesHelper(1e3);
+    this.scene.add(this.camera);
+    if (!noAppend) {
+      container.appendChild(this.renderer.domElement);
+    }
+    this.init();
+    this.cacheInstance = PointCloudCache.getInstance();
+  }
+  get DEFAULT_INIT_CAMERA_POSITION() {
+    return new THREE.Vector3(-0.01, 0, 10);
+  }
+  get containerWidth() {
+    return this.container.clientWidth;
+  }
+  get containerHeight() {
+    return this.container.clientHeight;
+  }
+  setInitCameraPosition(vector) {
+    this.initCameraPosition = vector;
+  }
+  setConfig(config) {
+    this.config = config;
+  }
+  initOrthographicCamera(orthographicParams) {
+    if (this.camera.type !== "OrthographicCamera") {
+      return;
+    }
+    const {left, right, top, bottom, near, far} = orthographicParams;
+    this.camera.left = left;
+    this.camera.right = right;
+    this.camera.top = top;
+    this.camera.bottom = bottom;
+    this.camera.near = near;
+    this.camera.far = far;
+    this.camera.updateProjectionMatrix();
+  }
+  initPerspectiveCamera() {
+    if (this.camera.type !== "PerspectiveCamera") {
+      return;
+    }
+    this.camera.fov = 30;
+    this.camera.aspect = this.containerWidth / this.containerHeight;
+    this.camera.near = 1;
+    this.camera.far = 1e3;
+    this.camera.updateProjectionMatrix();
+  }
+  initCamera() {
+    const {camera} = this;
+    if (this.isOrthographicCamera) {
+      const {x, y, z} = this.initCameraPosition;
+      camera.position.set(x, y, z);
+    } else {
+      camera.position.set(-1, 0, 500);
+    }
+    camera.up.set(0, 0, 1);
+  }
+  initControls() {
+    const {controls} = this;
+    controls.addEventListener("change", () => {
+      this.render();
+    });
+    this.setDefaultControls();
+  }
+  setDefaultControls() {
+    const {controls} = this;
+    const centerPoint = [0, 0, 0];
+    controls.target = new THREE.Vector3(...centerPoint);
+    controls.addEventListener("change", () => {
+      this.render();
+    });
+    controls.maxPolarAngle = Math.PI / 2;
+    controls.update();
+  }
+  initRenderer() {
+    const {renderer} = this;
+    renderer.setPixelRatio(window.devicePixelRatio);
+    renderer.setSize(this.containerWidth, this.containerHeight);
+  }
+  init() {
+    const {scene} = this;
+    scene.background = new THREE.Color(this.backgroundColor);
+    this.initControls();
+    this.initRenderer();
+  }
+  removeObjectByName(name) {
+    const oldBox = this.scene.getObjectByName(name);
+    if (oldBox) {
+      oldBox.removeFromParent();
+    }
+  }
+  generateBox(boxParams, color = 16777215) {
+    const newColor = color;
+    this.AddBoxToSense(boxParams, newColor);
+    this.render();
+  }
+  getAllAttributeColor(boxes) {
+    return boxes.reduce((acc, box) => {
+      acc[box.attribute] = toolStyleConverter.getColorFromConfig({attribute: box.attribute}, __spreadProps(__spreadValues({}, this.config), {attributeConfigurable: true}), {});
+      return acc;
+    }, {});
+  }
+  generateBoxes(boxes) {
+    boxes.forEach((box) => {
+      this.generateBox(box);
+    });
+    this.render();
+  }
+  getOrthographicCamera(boxParams) {
+    const {center, width, height} = boxParams;
+    const offset = 10;
+    const left = center.x - width / 2 - offset;
+    const right = center.x - width / 2 + offset;
+    const top = center.y + height / 2 + offset;
+    const bottom = center.y - height / 2 - offset;
+    const near = 100;
+    const far = -100;
+    const zoom = 500 / near;
+    return {
+      left,
+      right,
+      top,
+      bottom,
+      near,
+      far,
+      zoom
+    };
+  }
+  updateCameraZoom(zoom) {
+    this.camera.zoom = zoom;
+    this.camera.updateProjectionMatrix();
+  }
+  updateCameraByBox(boxParams, perspectiveView, customCameraVector) {
+    const {center, width, height, depth, rotation} = boxParams;
+    const cameraPositionVector = this.getCameraVector(center, rotation, {width, height, depth}, perspectiveView);
+    if (customCameraVector) {
+      this.updateCamera(customCameraVector, center);
+      return new THREE.Vector3(customCameraVector.x, customCameraVector.y, customCameraVector.z);
+    }
+    this.updateCamera(cameraPositionVector, center);
+    return cameraPositionVector;
+  }
+  updateCameraBySphere(sphereParams, perspectiveView) {
+    const {center} = sphereParams;
+    const {radius} = DEFAULT_SPHERE_PARAMS;
+    const cameraPositionVector = this.getCameraVector(center, 0, {width: radius * 2, height: radius * 2, depth: radius * 2}, perspectiveView);
+    this.updateCamera(cameraPositionVector, center);
+    return cameraPositionVector;
+  }
+  updateOrthoCamera(boxParams, perspectiveView) {
+    const cameraPositionVector = this.updateCameraByBox(boxParams, perspectiveView);
+    this.camera.zoom = 1;
+    this.camera.updateProjectionMatrix();
+    return {
+      cameraPositionVector
+    };
+  }
+  updateOrthoCameraBySphere(sphereParams, perspectiveView) {
+    const cameraPositionVector = this.updateCameraBySphere(sphereParams, perspectiveView);
+    this.camera.zoom = 1;
+    this.camera.updateProjectionMatrix();
+    return {
+      cameraPositionVector
+    };
+  }
+  updateTopCamera() {
+    this.setInitCameraPosition(this.DEFAULT_INIT_CAMERA_POSITION);
+    this.camera.zoom = 1;
+    this.initCamera();
+    this.setDefaultControls();
+    this.camera.updateProjectionMatrix();
+    this.render();
+  }
+  updateCamera(position, target) {
+    this.camera.position.set(position.x, position.y, position.z);
+    this.controls.target = new THREE.Vector3(target.x, target.y, target.z);
+    this.controls.update();
+  }
+  resetCamera() {
+    this.updateCamera(this.DEFAULT_INIT_CAMERA_POSITION, {x: 0, y: 0, z: 0});
+  }
+  getOrthographicCameraTarget(camera) {
+    const direction = new THREE.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+    const target = camera.position.clone().add(direction);
+    return target;
+  }
+  createThreeMatrix4(matrix4) {
+    return new THREE.Matrix4().set(...matrix4);
+  }
+  filterPointsByBox(boxParams, points, color) {
+    var _a, _b, _c;
+    if (!points) {
+      const originPoints = this.scene.getObjectByName(this.pointCloudObjectName);
+      if (!originPoints) {
+        console.error("There is no corresponding point cloud object");
+        return Promise.resolve(void 0);
+      }
+      points = (_c = (_b = (_a = originPoints == null ? void 0 : originPoints.geometry) == null ? void 0 : _a.attributes) == null ? void 0 : _b.position) == null ? void 0 : _c.array;
+    }
+    if (window.Worker) {
+      const {zMin, zMax, polygonPointList} = getCuboidFromPointCloudBox(boxParams);
+      const position = points;
+      color = color != null ? color : new Float32Array([]);
+      const params = {
+        boxParams,
+        zMin,
+        zMax,
+        polygonPointList,
+        color,
+        position
+      };
+      return new Promise((resolve) => {
+        const filterBoxWorker = new WorkerFactory$1();
+        filterBoxWorker.postMessage(params);
+        filterBoxWorker.onmessage = (e) => {
+          const {color: newColor, position: newPosition, num} = e.data;
+          const geometry = new THREE.BufferGeometry();
+          geometry.setAttribute("position", new THREE.Float32BufferAttribute(newPosition, 3));
+          geometry.setAttribute("color", new THREE.Float32BufferAttribute(newColor, 3));
+          geometry.computeBoundingSphere();
+          filterBoxWorker.terminate();
+          resolve({geometry, num});
+        };
+      });
+    }
+    return Promise.resolve(void 0);
+  }
+  getCameraVector(centerPoint, rotationZ, volume, perspectiveView = EPerspectiveView.Front, defaultDistance = DEFAULT_DISTANCE) {
+    let TcMatrix4 = PerspectiveShiftUtils.frontViewMatrix4(defaultDistance);
+    switch (perspectiveView) {
+      case EPerspectiveView.Front:
+        break;
+      case EPerspectiveView.Back:
+        TcMatrix4 = PerspectiveShiftUtils.backViewMatrix4(defaultDistance);
+        break;
+      case EPerspectiveView.Left:
+        TcMatrix4 = PerspectiveShiftUtils.leftViewMatrix4(defaultDistance);
+        break;
+      case EPerspectiveView.Right:
+        TcMatrix4 = PerspectiveShiftUtils.rightViewMatrix4(defaultDistance);
+        break;
+      case EPerspectiveView.Top:
+        TcMatrix4 = PerspectiveShiftUtils.topViewMatrix4(defaultDistance);
+        break;
+      case EPerspectiveView.LFT:
+        TcMatrix4 = PerspectiveShiftUtils.leftFrontTopViewMatrix4(defaultDistance, volume);
+        break;
+      case EPerspectiveView.RBT:
+        TcMatrix4 = PerspectiveShiftUtils.rightBackTopViewMatrix4(defaultDistance, volume);
+        break;
+    }
+    const Tc = this.createThreeMatrix4(TcMatrix4);
+    const TFrom = new THREE.Matrix4().makeTranslation(-centerPoint.x, -centerPoint.y, -centerPoint.z);
+    const TBack = new THREE.Matrix4().makeTranslation(centerPoint.x, centerPoint.y, centerPoint.z);
+    const Rz = new THREE.Matrix4().makeRotationZ(rotationZ);
+    const centerVector = new THREE.Vector3(centerPoint.x, centerPoint.y, centerPoint.z);
+    const cameraVector = centerVector.clone().applyMatrix4(Tc).applyMatrix4(TFrom).applyMatrix4(Rz).applyMatrix4(TBack);
+    return cameraVector;
+  }
+  createRange(radius) {
+    this.removeObjectByName(this.rangeObjectName);
+    const curve = new THREE.EllipseCurve(0, 0, radius, radius, 0, 2 * Math.PI, false, 0);
+    const points = curve.getPoints(50);
+    const geometry = new THREE.BufferGeometry().setFromPoints(points);
+    const material = new THREE.LineBasicMaterial({color: 16711680});
+    const ellipse = new THREE.Line(geometry, material);
+    ellipse.name = this.rangeObjectName;
+    return ellipse;
+  }
+  renderPointCloud(points, radius) {
+    points.name = this.pointCloudObjectName;
+    const pointsMaterial = new THREE.PointsMaterial({
+      vertexColors: true
+    });
+    pointsMaterial.onBeforeCompile = this.overridePointShader;
+    pointsMaterial.size = 1.2;
+    if (radius) {
+      this.generateRange(radius);
+    }
+    this.pointsUuid = points.uuid;
+    points.material = pointsMaterial;
+    this.filterZAxisPoints(points);
+    this.scene.add(points);
+    this.render();
+  }
+  clearPointCloud() {
+    this.removeObjectByName(this.pointCloudObjectName);
+  }
+  clearPointCloudAndRender() {
+    this.clearPointCloud();
+    this.render();
+  }
+  highlightOriginPointCloud(pointCloudBoxList) {
+    const oldPointCloud = this.scene.getObjectByName(this.pointCloudObjectName);
+    if (!oldPointCloud) {
+      return;
+    }
+    this.highlightPCDSrc = this.currentPCDSrc;
+    return new Promise((resolve) => {
+      if (window.Worker) {
+        const newPointCloudBoxList = pointCloudBoxList ? [...pointCloudBoxList] : [];
+        const cuboidList = newPointCloudBoxList.map((v) => getCuboidFromPointCloudBox(v));
+        const colorList = this.getAllAttributeColor(cuboidList);
+        const params = {
+          cuboidList,
+          position: oldPointCloud.geometry.attributes.position.array,
+          color: oldPointCloud.geometry.attributes.color.array,
+          colorList
+        };
+        highlightWorker.postMessage(params);
+        highlightWorker.onmessage = (e) => {
+          const {color} = e.data;
+          const colorAttribute = new THREE.BufferAttribute(color, 3);
+          if (this.highlightPCDSrc) {
+            this.cacheInstance.updateColor(this.highlightPCDSrc, color);
+            this.highlightPCDSrc = void 0;
+          }
+          colorAttribute.needsUpdate = true;
+          oldPointCloud.geometry.setAttribute("color", colorAttribute);
+          resolve(color);
+          this.render();
+        };
+      }
+    });
+  }
+  updateColor(color) {
+    const oldPointCloud = this.scene.getObjectByName(this.pointCloudObjectName);
+    if (oldPointCloud) {
+      const colorAttribute = new THREE.BufferAttribute(color, 3);
+      colorAttribute.needsUpdate = true;
+      oldPointCloud.geometry.setAttribute("color", colorAttribute);
+      this.render();
+    }
+  }
+  setShowDirection(showDirection) {
+    this.showDirection = showDirection;
+    this.scene.children.forEach((v) => {
+      if (v.type === "Group") {
+        v.children.forEach((object) => {
+          if (object.type === "ArrowHelper") {
+            object.visible = showDirection;
+          }
+        });
+      }
+    });
+    this.render();
+  }
+  getTextCanvas(text) {
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
+    if (ctx) {
+      ctx.font = `${50}px " bold`;
+      ctx.fillStyle = "white";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(text, canvas.width / 2, canvas.height / 2);
+    }
+    return canvas;
+  }
+  filterNoise(innerPointList) {
+    let newPointList = [...innerPointList];
+    newPointList.sort((a, b) => a.z - b.z);
+    const startIndexZ = Math.floor(newPointList.length * 0.05);
+    const roadPoint = newPointList[startIndexZ];
+    newPointList = newPointList.filter(({z}) => z > roadPoint.z + 0.1);
+    const noisePercent = 5e-3;
+    const endIndexZ = Math.floor(newPointList.length * (1 - noisePercent));
+    newPointList = newPointList.slice(0, endIndexZ);
+    newPointList.sort((a, b) => a.x - b.x);
+    const startIndexX = Math.floor(newPointList.length * noisePercent);
+    const endIndexX = Math.floor(newPointList.length * (1 - noisePercent));
+    newPointList = newPointList.slice(startIndexX, endIndexX);
+    newPointList.sort((a, b) => a.y - b.y);
+    const startIndexY = Math.floor(newPointList.length * noisePercent);
+    const endIndexY = Math.floor(newPointList.length * (1 - noisePercent));
+    newPointList = newPointList.slice(startIndexY, endIndexY);
+    return newPointList.length > 100 ? newPointList : innerPointList;
+  }
+  getFittedCoordinates(polygon, innerPointList) {
+    const minDistanceList = [];
+    let _polygon = [...polygon, polygon[0]];
+    innerPointList.forEach(({x, y}) => {
+      polygon.forEach((p1, index) => {
+        const p2 = _polygon[index + 1];
+        const distance = MathUtils.getFootOfPerpendicular({x, y}, p1, p2, false, true).length;
+        if (!minDistanceList[index] || distance < minDistanceList[index].distance) {
+          minDistanceList[index] = {distance, point: {x, y}};
+        }
+      });
+    });
+    _polygon = [polygon[polygon.length - 1], ...polygon, polygon[0]];
+    const _minDistanceList = [minDistanceList[minDistanceList.length - 1], ...minDistanceList];
+    const fittedCoordinates = polygon.map((_, index) => {
+      const p1 = _polygon[index];
+      const p2 = _polygon[index + 1];
+      const p3 = _polygon[index + 2];
+      return PointCloudUtils.getIntersectionBySlope({
+        p1: _minDistanceList[index].point,
+        k1: (p1.y - p2.y) / (p1.x - p2.x),
+        p2: _minDistanceList[index + 1].point,
+        k2: (p2.y - p3.y) / (p2.x - p3.x)
+      });
+    });
+    return fittedCoordinates;
+  }
+  getSensesPointZAxisInPolygon(polygon, zScope, intelligentFit) {
+    var _a, _b, _c;
+    const points = this.scene.children.find((i) => i.uuid === this.pointsUuid);
+    let minZ = 0;
+    let maxZ = 0;
+    let count = 0;
+    let zCount = 0;
+    let fittedCoordinates = [];
+    let innerPointList = [];
+    const pointPosArray = ((_c = (_b = (_a = points == null ? void 0 : points.geometry) == null ? void 0 : _a.attributes) == null ? void 0 : _b.position) == null ? void 0 : _c.array) || [];
+    for (let idx = 0; idx < pointPosArray.length; idx += 3) {
+      const x = pointPosArray[idx];
+      const y = pointPosArray[idx + 1];
+      const z = pointPosArray[idx + 2];
+      const inPolygon = isInPolygon({x, y}, polygon);
+      if (inPolygon && (z || z === 0)) {
+        innerPointList.push({x, y, z});
+      }
+    }
+    if (!innerPointList.length) {
+      return {maxZ, minZ, count, zCount, fittedCoordinates};
+    }
+    if (intelligentFit) {
+      innerPointList = this.filterNoise(innerPointList);
+      fittedCoordinates = this.getFittedCoordinates(polygon, innerPointList);
+    }
+    innerPointList.sort((a, b) => a.z - b.z);
+    minZ = innerPointList[0].z - 0.01;
+    maxZ = innerPointList[innerPointList.length - 1].z + 0.01;
+    zCount = innerPointList.length;
+    if (zScope) {
+      count = innerPointList.filter(({z}) => z >= zScope[0] && z <= zScope[1]).length;
+    }
+    return {maxZ, minZ, count, zCount, fittedCoordinates};
+  }
+  getBasicCoordinate2Canvas(vector) {
+    const w = this.containerWidth / 2;
+    const h = this.containerHeight / 2;
+    return {
+      x: vector.x * w + w,
+      y: vector.y * h + h,
+      z: vector.z
+    };
+  }
+  get basicCoordinate2CanvasMatrix4() {
+    const w = this.containerWidth / 2;
+    const h = this.containerHeight / 2;
+    return new THREE.Matrix4().set(w, 0, 0, w, 0, h, 0, h, 0, 0, 1, 0, 0, 0, 0, 1);
+  }
+  getCanvas2BasicCoordinate(vector) {
+    const w = this.containerWidth / 2;
+    const h = this.containerHeight / 2;
+    return new THREE.Vector3(vector.x / w - w / 2, -(vector.y / h - h / 2), 1);
+  }
+  getPolygonSidePoints(boxParams) {
+    const {
+      center: {x, y, z},
+      height,
+      width,
+      depth
+    } = boxParams;
+    const lfb = {
+      x: x + width / 2,
+      y: y + height / 2,
+      z: z - depth / 2
+    };
+    const lft = {
+      x: x + width / 2,
+      y: y + height / 2,
+      z: z + depth / 2
+    };
+    const lbt = {
+      x: x - width / 2,
+      y: y + height / 2,
+      z: z + depth / 2
+    };
+    const lbb = {
+      x: x - width / 2,
+      y: y + height / 2,
+      z: z - depth / 2
+    };
+    const vectorList = [lfb, lft, lbt, lbb];
+    return vectorList;
+  }
+  getPolygonBackPoints(boxParams) {
+    const {
+      center: {x, y, z},
+      height,
+      width,
+      depth
+    } = boxParams;
+    const lbt = {
+      x: x - width / 2,
+      y: y + height / 2,
+      z: z + depth / 2
+    };
+    const lbb = {
+      x: x - width / 2,
+      y: y + height / 2,
+      z: z - depth / 2
+    };
+    const rbb = {
+      x: x - width / 2,
+      y: y - height / 2,
+      z: z - depth / 2
+    };
+    const rbt = {
+      x: x - width / 2,
+      y: y - height / 2,
+      z: z + depth / 2
+    };
+    const vectorList = [lbt, lbb, rbb, rbt];
+    return vectorList;
+  }
+  getPolygonTopPoints(boxParams) {
+    const {
+      center: {x, y, z},
+      height,
+      width,
+      depth
+    } = boxParams;
+    const lft = {
+      x: x + width / 2,
+      y: y + height / 2,
+      z: z + depth / 2
+    };
+    const rft = {
+      x: x + width / 2,
+      y: y - height / 2,
+      z: z + depth / 2
+    };
+    const rbt = {
+      x: x - width / 2,
+      y: y - height / 2,
+      z: z + depth / 2
+    };
+    const lbt = {
+      x: x - width / 2,
+      y: y + height / 2,
+      z: z + depth / 2
+    };
+    const vectorList = [lft, rft, rbt, lbt];
+    return vectorList;
+  }
+  getModelTransformationMatrix(boxParams) {
+    const {
+      center: {x, y, z},
+      rotation
+    } = boxParams;
+    const TFrom = new THREE.Matrix4().makeTranslation(-x, -y, -z);
+    const TBack = new THREE.Matrix4().makeTranslation(x, y, z);
+    const Rz = new THREE.Matrix4().makeRotationZ(rotation);
+    return new THREE.Matrix4().multiply(TBack).multiply(Rz).multiply(TFrom);
+  }
+  getBoxSidePolygon2DCoordinate(boxParams) {
+    return this.getBoxPolygon2DCoordinate(boxParams, EPerspectiveView.Left);
+  }
+  getBoxBackPolygon2DCoordinate(boxParams) {
+    return this.getBoxPolygon2DCoordinate(boxParams, EPerspectiveView.Back);
+  }
+  getSphereSidePoint2DCoordinate(sphereParams) {
+    return this.getSpherePoint2DCoordinate(sphereParams);
+  }
+  getSphereBackPoint2DCoordinate(sphereParams) {
+    return this.getSpherePoint2DCoordinate(sphereParams);
+  }
+  boxParams2ViewPolygon(boxParams, perspectiveView) {
+    switch (perspectiveView) {
+      case EPerspectiveView.Left:
+        return this.getPolygonSidePoints(boxParams);
+      case EPerspectiveView.Back:
+        return this.getPolygonBackPoints(boxParams);
+      default: {
+        return this.getPolygonTopPoints(boxParams);
+      }
+    }
+  }
+  getBoxPolygon2DCoordinate(boxParams, perspectiveView) {
+    const vectorList = this.boxParams2ViewPolygon(boxParams, perspectiveView);
+    const {width, height} = boxParams;
+    const projectMatrix = new THREE.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix);
+    const boxSideMatrix = new THREE.Matrix4().premultiply(this.getModelTransformationMatrix(boxParams)).premultiply(projectMatrix).premultiply(this.basicCoordinate2CanvasMatrix4);
+    this.sideMatrix = boxSideMatrix;
+    const polygon2d = vectorList.map((vector) => new THREE.Vector3(vector.x, vector.y, vector.z)).map((vector) => vector.applyMatrix4(this.sideMatrix));
+    const wZoom = this.containerWidth / width;
+    const hZoom = this.containerHeight / height;
+    return {
+      polygon2d,
+      zoom: Math.min(wZoom, hZoom) / 2
+    };
+  }
+  getSpherePoint2DCoordinate(sphereParams) {
+    const {center, attribute, id, valid} = sphereParams;
+    const {radius} = DEFAULT_SPHERE_PARAMS;
+    const transParams = {
+      center,
+      attribute,
+      id,
+      valid,
+      width: radius * 2,
+      height: radius * 2,
+      depth: radius * 2,
+      rotation: 0
+    };
+    const projectMatrix = new THREE.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix);
+    const boxSideMatrix = new THREE.Matrix4().premultiply(this.getModelTransformationMatrix(transParams)).premultiply(projectMatrix).premultiply(this.basicCoordinate2CanvasMatrix4);
+    this.sideMatrix = boxSideMatrix;
+    const point2d = new THREE.Vector3(center.x, center.y, center.z).applyMatrix4(this.sideMatrix);
+    const wZoom = this.containerWidth / (radius * 2);
+    const hZoom = this.containerHeight / (radius * 2);
+    return {
+      point2d,
+      zoom: Math.min(wZoom, hZoom) / 2
+    };
+  }
+  getSphereTopPoint2DCoordinate(sphereParams) {
+    const {center} = sphereParams;
+    const {radius} = DEFAULT_SPHERE_PARAMS;
+    const point2d = {
+      x: -(center.y - this.containerWidth / 2),
+      y: -(center.x - this.containerHeight / 2)
+    };
+    const wZoom = this.containerWidth / (radius * 2);
+    const hZoom = this.containerHeight / (radius * 2);
+    return {
+      point2d,
+      zoom: Math.min(wZoom, hZoom) / 2
+    };
+  }
+  getBoxTopPolygon2DCoordinate(boxParams) {
+    const {width, height} = boxParams;
+    const vectorList = this.getPolygonTopPoints(boxParams);
+    const polygon2d = vectorList.map((vector) => new THREE.Vector3(vector.x, vector.y, vector.z)).map((vector) => vector.applyMatrix4(this.getModelTransformationMatrix(boxParams))).map((vector) => {
+      return {
+        x: vector.y,
+        y: vector.x
+      };
+    }).map((vector) => {
+      return {
+        x: -(vector.x - this.containerWidth / 2),
+        y: -(vector.y - this.containerHeight / 2)
+      };
+    });
+    const wZoom = this.containerWidth / width;
+    const hZoom = this.containerHeight / height;
+    return {
+      polygon2d,
+      zoom: Math.min(wZoom, hZoom) / 2
+    };
+  }
+  getNewBoxBySideUpdate(offsetCenterPoint, offsetWidth, offsetDepth, selectedPointCloudBox) {
+    const Rz = new THREE.Matrix4().makeRotationZ(selectedPointCloudBox.rotation);
+    const offsetVector = new THREE.Vector3(-offsetCenterPoint.x, 0, 0).applyMatrix4(Rz);
+    let newBoxParams = selectedPointCloudBox;
+    newBoxParams.center = {
+      x: newBoxParams.center.x + offsetVector.x,
+      y: newBoxParams.center.y + offsetVector.y,
+      z: newBoxParams.center.z - offsetCenterPoint.z
+    };
+    newBoxParams = __spreadProps(__spreadValues({}, newBoxParams), {
+      width: newBoxParams.width + offsetWidth,
+      height: newBoxParams.height,
+      depth: newBoxParams.depth + offsetDepth
+    });
+    return {newBoxParams};
+  }
+  getNewBoxByBackUpdate(offsetCenterPoint, offsetWidth, offsetDepth, selectedPointCloudBox) {
+    const Rz = new THREE.Matrix4().makeRotationZ(selectedPointCloudBox.rotation);
+    const offsetVector = new THREE.Vector3(0, -offsetCenterPoint.x, 0).applyMatrix4(Rz);
+    let newBoxParams = selectedPointCloudBox;
+    newBoxParams.center = {
+      x: newBoxParams.center.x + offsetVector.x,
+      y: newBoxParams.center.y + offsetVector.y,
+      z: newBoxParams.center.z - offsetCenterPoint.z
+    };
+    newBoxParams = __spreadProps(__spreadValues({}, newBoxParams), {
+      width: newBoxParams.width,
+      height: newBoxParams.height + offsetWidth,
+      depth: newBoxParams.depth + offsetDepth
+    });
+    return {newBoxParams};
+  }
+  getNewBoxBySideUpdateByPoints(pointList, offsetHeight, offsetZ, selectedPointCloudBox) {
+    var _a;
+    const invertMatrix = (_a = this.sideMatrix) == null ? void 0 : _a.invert();
+    if (!this.sideMatrix || !invertMatrix) {
+      console.error("No sideMatrix");
+      return;
+    }
+    this.camera.zoom = 1;
+    this.camera.updateProjectionMatrix();
+    const polygonWorld = pointList.map((vector) => new THREE.Vector3(vector.x, vector.y, vector.z)).map((vector) => vector.applyMatrix4(invertMatrix));
+    const [p1v, p2v, p3v, p4v] = polygonWorld;
+    const width = Math.max(Math.abs(p1v.x - p3v.x), Math.abs(p1v.x - p2v.x));
+    const centerVector = p2v.add(p4v).applyMatrix3(new THREE.Matrix3().set(1 / 2, 0, 0, 0, 1 / 2, 0, 0, 0, 1 / 2));
+    const offsetVector = centerVector.clone().applyMatrix3(new THREE.Matrix3().set(-1, 0, 0, 0, -1, 0, 0, 0, -1)).add(new THREE.Vector3(selectedPointCloudBox.center.x, selectedPointCloudBox.center.y, selectedPointCloudBox.center.z));
+    const newBoxParams = __spreadProps(__spreadValues({}, selectedPointCloudBox), {
+      center: {
+        x: selectedPointCloudBox.center.x - offsetVector.x,
+        y: selectedPointCloudBox.center.y - offsetVector.y,
+        z: selectedPointCloudBox.center.z - offsetZ
+      },
+      width,
+      height: selectedPointCloudBox.height,
+      depth: selectedPointCloudBox.depth + offsetHeight,
+      rotation: selectedPointCloudBox.rotation
+    });
+    return {newBoxParams};
+  }
+  filterZAxisPoints(pcdPoints) {
+    const points = pcdPoints || this.scene.children.find((i) => i.uuid === this.pointsUuid);
+    if (points) {
+      const {attributes} = points.geometry;
+      const {position} = attributes;
+      const visibility = [];
+      const {count} = position;
+      for (let i = 0; i < count; i++) {
+        const z = position.getZ(i);
+        visibility.push(z > this.zAxisLimit ? 0 : 1);
+      }
+      points.geometry.setAttribute("visibility", new THREE.Float32BufferAttribute(visibility, 1));
+      points.geometry.attributes.visibility.needsUpdate = true;
+    }
+  }
+  render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+}
+
+export { PointCloud };