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

package/dist/core/pointCloud/index.js

@@ -1,11 +1,997 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var THREE=require("three"),lbUtils=require("@labelbee/lb-utils"),highlightWorker$1=require("../../_virtual/highlightWorker.js"),filterBoxWorker=require("../../_virtual/filterBoxWorker.js"),polygonTool=require("../../utils/tool/polygonTool.js"),uuid=require("../../utils/uuid.js"),MathUtils=require("../../utils/MathUtils.js"),PCDLoader=require("./PCDLoader.js"),OrbitControls=require("./OrbitControls.js"),cache=require("./cache.js"),matrix=require("./matrix.js");require("../../constant/tool.js"),require("../scheduler.js");function _interopNamespace(m){if(m&&m.__esModule)return m;var t=Object.create(null);return m&&Object.keys(m).forEach(function(e){if(e!=="default"){var r=Object.getOwnPropertyDescriptor(m,e);Object.defineProperty(t,e,r.get?r:{enumerable:!0,get:function(){return m[e]}})}}),t.default=m,Object.freeze(t)}var THREE__namespace=_interopNamespace(THREE),__defProp=Object.defineProperty,__defProps=Object.defineProperties,__getOwnPropDescs=Object.getOwnPropertyDescriptors,__getOwnPropSymbols=Object.getOwnPropertySymbols,__hasOwnProp=Object.prototype.hasOwnProperty,__propIsEnum=Object.prototype.propertyIsEnumerable,__defNormalProp=(m,t,e)=>t in m?__defProp(m,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):m[t]=e,__spreadValues=(m,t)=>{for(var e in t||(t={}))__hasOwnProp.call(t,e)&&__defNormalProp(m,e,t[e]);if(__getOwnPropSymbols)for(var e of __getOwnPropSymbols(t))__propIsEnum.call(t,e)&&__defNormalProp(m,e,t[e]);return m},__spreadProps=(m,t)=>__defProps(m,__getOwnPropDescs(t)),__async=(m,t,e)=>new Promise((r,n)=>{var s=o=>{try{i(e.next(o))}catch(c){n(c)}},a=o=>{try{i(e.throw(o))}catch(c){n(c)}},i=o=>o.done?r(o.value):Promise.resolve(o.value).then(s,a);i((e=e.apply(m,t)).next())});const DEFAULT_DISTANCE=30,highlightWorker=new highlightWorker$1({type:"module"});class PointCloud{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 c;const h=(c=i.id)!=null?c:uuid();this.removeObjectByName(h);const{radius:l,widthSegments:d,heightSegments:g}=lbUtils.DEFAULT_SPHERE_PARAMS,{center:x}=i,p=new THREE__namespace.Group,u=new THREE__namespace.SphereGeometry(l,d,g),f=new THREE__namespace.MeshBasicMaterial({color:o}),y=new THREE__namespace.Mesh(u,f);y.position.set(x.x,x.y,x.z),p.add(y),p.name=h,this.scene.add(p)},this.generateSphere=i=>{const{fill:o}=lbUtils.toolStyleConverter.getColorFromConfig({attribute:i.attribute},__spreadProps(__spreadValues({},this.config),{attributeConfigurable:!0}),{});this.addSphereToSense(i,o),this.render()},this.generateSpheres=i=>{i.forEach(o=>{const{fill:c}=lbUtils.toolStyleConverter.getColorFromConfig({attribute:o.attribute},__spreadProps(__spreadValues({},this.config),{attributeConfigurable:!0}),{});this.addSphereToSense(o,c)}),this.render()},this.AddBoxToSense=(i,o=16777215)=>{var c;const h=(c=i.id)!=null?c:uuid();this.removeObjectByName(h);const{center:l,width:d,height:g,depth:x,rotation:p}=i,u=new THREE__namespace.Group,f=new THREE__namespace.BoxGeometry(d,g,x),y=new THREE__namespace.MeshBasicMaterial({color:"blue"}),w=new THREE__namespace.Mesh(f,y),C=new THREE__namespace.BoxHelper(w,o),P=this.generateBoxArrow(i);u.add(C),u.add(P),l&&u.position.set(l.x,l.y,l.z),p&&u.rotation.set(0,0,p),u.name=h,this.scene.add(u)},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=`
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var THREE = require('three');
+var lbUtils = require('@labelbee/lb-utils');
+var highlightWorker$1 = require('../../_virtual/highlightWorker.js');
+var filterBoxWorker = require('../../_virtual/filterBoxWorker.js');
+var polygonTool = require('../../utils/tool/polygonTool.js');
+var uuid = require('../../utils/uuid.js');
+var MathUtils = require('../../utils/MathUtils.js');
+var PCDLoader = require('./PCDLoader.js');
+var OrbitControls = require('./OrbitControls.js');
+var cache = require('./cache.js');
+var matrix = require('./matrix.js');
+require('../../constant/tool.js');
+require('../scheduler.js');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
+}
+
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+
+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 highlightWorker$1({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} = lbUtils.DEFAULT_SPHERE_PARAMS;
+      const {center} = sphereParams;
+      const group = new THREE__namespace.Group();
+      const spGeo = new THREE__namespace.SphereGeometry(radius, widthSegments, heightSegments);
+      const spMaterial = new THREE__namespace.MeshBasicMaterial({color});
+      const sphere = new THREE__namespace.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} = lbUtils.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} = lbUtils.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__namespace.Group();
+      const geometry = new THREE__namespace.BoxGeometry(width, height, depth);
+      const material = new THREE__namespace.MeshBasicMaterial({color: "blue"});
+      const cube = new THREE__namespace.Mesh(geometry, material);
+      const box = new THREE__namespace.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)=>__async(this,null,function*(){this.clearPointCloud(),this.currentPCDSrc=i;const{points:c,color:h}=yield this.cacheInstance.loadPCDFile(i),l=new THREE__namespace.BufferGeometry;l.setAttribute("position",new THREE__namespace.BufferAttribute(c,3)),l.setAttribute("color",new THREE__namespace.BufferAttribute(h,3));const d=new THREE__namespace.Points(l);this.renderPointCloud(d,o)}),this.loadPCDFileByBox=(i,o,c)=>__async(this,null,function*(){const h=(g,x)=>__async(this,null,function*(){const{width:p=0,height:u=0,depth:f=0}=c!=null?c:{},y=yield this.filterPointsByBox(__spreadProps(__spreadValues({},o),{width:o.width+p,height:o.height+u,depth:o.depth+f}),g,x);if(!y){console.error("filter Error");return}this.clearPointCloud(),this.currentPCDSrc=i;const w=new THREE__namespace.Points(y.geometry);w.name=this.pointCloudObjectName,this.scene.add(w),this.render()}),{points:l,color:d}=yield this.cacheInstance.loadPCDFile(i);h(l,d)}),this.generateRange=i=>{const o=this.createRange(i);this.scene.add(o)},this.generateBoxArrow=({width:i})=>{const o=new THREE__namespace.Vector3(1,0,0),c=new THREE__namespace.Vector3(i/2,0,0),h=2,l=16776960,d=new THREE__namespace.ArrowHelper(o,c,h,l);return d.visible=this.showDirection,d},this.generateBoxTrackID=i=>{if(!i.trackID)return;const o=new THREE__namespace.Texture(this.getTextCanvas(i.trackID.toString()));o.needsUpdate=!0;const c=new THREE__namespace.SpriteMaterial({map:o,depthWrite:!1}),h=new THREE__namespace.Sprite(c);return h.scale.set(5,5,5),h.position.set(-i.width/2,0,i.depth/2+.5),h},this.applyZAxisPoints=i=>{this.zAxisLimit=i,this.filterZAxisPoints(),this.render()},this.updatePointSize=i=>{const o=this.scene.getObjectByName(this.pointCloudObjectName);if(!o)return;const c=o.material.size;i?o.material.size=Math.min(c*1.2,10):o.material.size=Math.max(c/1.2,1),this.render()},this.container=t,this.renderer=new THREE__namespace.WebGLRenderer({antialias:!0}),this.backgroundColor=s,this.config=a,r&&n?(this.isOrthographicCamera=!0,this.camera=new THREE__namespace.OrthographicCamera(n.left,n.right,n.top,n.bottom,n.near,n.far)):this.camera=new THREE__namespace.PerspectiveCamera(30,this.containerWidth/this.containerHeight,1,1e3),this.initCamera(),this.scene=new THREE__namespace.Scene,this.controls=new OrbitControls.OrbitControls(this.camera,this.renderer.domElement),this.pcdLoader=new PCDLoader.PCDLoader,this.axesHelper=new THREE__namespace.AxesHelper(1e3),this.scene.add(this.camera),e||t.appendChild(this.renderer.domElement),this.init(),this.cacheInstance=cache.PointCloudCache.getInstance()}get DEFAULT_INIT_CAMERA_POSITION(){return new THREE__namespace.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 THREE__namespace.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 THREE__namespace.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]=lbUtils.toolStyleConverter.getColorFromConfig({attribute:r.attribute},__spreadProps(__spreadValues({},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,c=e.y-n/2-s,h=100,l=-100,d=500/h;return{left:a,right:i,top:o,bottom:c,near:h,far:l,zoom:d}}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,c=this.getCameraVector(n,o,{width:s,height:a,depth:i},e);return r?(this.updateCamera(r,n),new THREE__namespace.Vector3(r.x,r.y,r.z)):(this.updateCamera(c,n),c)}updateCameraBySphere(t,e){const{center:r}=t,{radius:n}=lbUtils.DEFAULT_SPHERE_PARAMS,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 THREE__namespace.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 THREE__namespace.Vector3(0,0,-1).applyQuaternion(t.quaternion);return t.position.clone().add(e)}createThreeMatrix4(t){return new THREE__namespace.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:c}=matrix.getCuboidFromPointCloudBox(t),h=e;r=r!=null?r:new Float32Array([]);const l={boxParams:t,zMin:i,zMax:o,polygonPointList:c,color:r,position:h};return new Promise(d=>{const g=new filterBoxWorker;g.postMessage(l),g.onmessage=x=>{const{color:p,position:u,num:f}=x.data,y=new THREE__namespace.BufferGeometry;y.setAttribute("position",new THREE__namespace.Float32BufferAttribute(u,3)),y.setAttribute("color",new THREE__namespace.Float32BufferAttribute(p,3)),y.computeBoundingSphere(),g.terminate(),d({geometry:y,num:f})}})}return Promise.resolve(void 0)}getCameraVector(t,e,r,n=lbUtils.EPerspectiveView.Front,s=DEFAULT_DISTANCE){let a=lbUtils.PerspectiveShiftUtils.frontViewMatrix4(s);switch(n){case lbUtils.EPerspectiveView.Front:break;case lbUtils.EPerspectiveView.Back:a=lbUtils.PerspectiveShiftUtils.backViewMatrix4(s);break;case lbUtils.EPerspectiveView.Left:a=lbUtils.PerspectiveShiftUtils.leftViewMatrix4(s);break;case lbUtils.EPerspectiveView.Right:a=lbUtils.PerspectiveShiftUtils.rightViewMatrix4(s);break;case lbUtils.EPerspectiveView.Top:a=lbUtils.PerspectiveShiftUtils.topViewMatrix4(s);break;case lbUtils.EPerspectiveView.LFT:a=lbUtils.PerspectiveShiftUtils.leftFrontTopViewMatrix4(s,r);break;case lbUtils.EPerspectiveView.RBT:a=lbUtils.PerspectiveShiftUtils.rightBackTopViewMatrix4(s,r);break}const i=this.createThreeMatrix4(a),o=new THREE__namespace.Matrix4().makeTranslation(-t.x,-t.y,-t.z),c=new THREE__namespace.Matrix4().makeTranslation(t.x,t.y,t.z),h=new THREE__namespace.Matrix4().makeRotationZ(e);return new THREE__namespace.Vector3(t.x,t.y,t.z).clone().applyMatrix4(i).applyMatrix4(o).applyMatrix4(h).applyMatrix4(c)}createRange(t){this.removeObjectByName(this.rangeObjectName);const r=new THREE__namespace.EllipseCurve(0,0,t,t,0,2*Math.PI,!1,0).getPoints(50),n=new THREE__namespace.BufferGeometry().setFromPoints(r),s=new THREE__namespace.LineBasicMaterial({color:16711680}),a=new THREE__namespace.Line(n,s);return a.name=this.rangeObjectName,a}renderPointCloud(t,e){t.name=this.pointCloudObjectName;const r=new THREE__namespace.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=>matrix.getCuboidFromPointCloudBox(o)),a=this.getAllAttributeColor(s),i={cuboidList:s,position:e.geometry.attributes.position.array,color:e.geometry.attributes.color.array,colorList:a};highlightWorker.postMessage(i),highlightWorker.onmessage=o=>{const{color:c}=o.data,h=new THREE__namespace.BufferAttribute(c,3);this.highlightPCDSrc&&(this.cacheInstance.updateColor(this.highlightPCDSrc,c),this.highlightPCDSrc=void 0),h.needsUpdate=!0,e.geometry.setAttribute("color",h),r(c),this.render()}}})}updateColor(t){const e=this.scene.getObjectByName(this.pointCloudObjectName);if(e){const r=new THREE__namespace.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((l,d)=>l.z-d.z);const r=Math.floor(e.length*.05),n=e[r];e=e.filter(({z:l})=>l>n.z+.1);const s=.005,a=Math.floor(e.length*(1-s));e=e.slice(0,a),e.sort((l,d)=>l.x-d.x);const i=Math.floor(e.length*s),o=Math.floor(e.length*(1-s));e=e.slice(i,o),e.sort((l,d)=>l.y-d.y);const c=Math.floor(e.length*s),h=Math.floor(e.length*(1-s));return e=e.slice(c,h),e.length>100?e:t}getFittedCoordinates(t,e){const r=[];let n=[...t,t[0]];e.forEach(({x:i,y:o})=>{t.forEach((c,h)=>{const l=n[h+1],d=MathUtils.default.getFootOfPerpendicular({x:i,y:o},c,l,!1,!0).length;(!r[h]||d<r[h].distance)&&(r[h]={distance:d,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 c=n[o],h=n[o+1],l=n[o+2];return lbUtils.PointCloudUtils.getIntersectionBySlope({p1:s[o].point,k1:(c.y-h.y)/(c.x-h.x),p2:s[o+1].point,k2:(h.y-l.y)/(h.x-l.x)})})}getSensesPointZAxisInPolygon(t,e,r){var n,s,a;const i=this.scene.children.find(p=>p.uuid===this.pointsUuid);let o=0,c=0,h=0,l=0,d=[],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 p=0;p<x.length;p+=3){const u=x[p],f=x[p+1],y=x[p+2];polygonTool.isInPolygon({x:u,y:f},t)&&(y||y===0)&&g.push({x:u,y:f,z:y})}return g.length?(r&&(g=this.filterNoise(g),d=this.getFittedCoordinates(t,g)),g.sort((p,u)=>p.z-u.z),o=g[0].z-.01,c=g[g.length-1].z+.01,l=g.length,e&&(h=g.filter(({z:p})=>p>=e[0]&&p<=e[1]).length),{maxZ:c,minZ:o,count:h,zCount:l,fittedCoordinates:d}):{maxZ:c,minZ:o,count:h,zCount:l,fittedCoordinates:d}}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 THREE__namespace.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 THREE__namespace.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},c={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};return[o,c,h,l]}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},c={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};return[o,c,h,l]}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},c={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};return[o,c,h,l]}getModelTransformationMatrix(t){const{center:{x:e,y:r,z:n},rotation:s}=t,a=new THREE__namespace.Matrix4().makeTranslation(-e,-r,-n),i=new THREE__namespace.Matrix4().makeTranslation(e,r,n),o=new THREE__namespace.Matrix4().makeRotationZ(s);return new THREE__namespace.Matrix4().multiply(i).multiply(o).multiply(a)}getBoxSidePolygon2DCoordinate(t){return this.getBoxPolygon2DCoordinate(t,lbUtils.EPerspectiveView.Left)}getBoxBackPolygon2DCoordinate(t){return this.getBoxPolygon2DCoordinate(t,lbUtils.EPerspectiveView.Back)}getSphereSidePoint2DCoordinate(t){return this.getSpherePoint2DCoordinate(t)}getSphereBackPoint2DCoordinate(t){return this.getSpherePoint2DCoordinate(t)}boxParams2ViewPolygon(t,e){switch(e){case lbUtils.EPerspectiveView.Left:return this.getPolygonSidePoints(t);case lbUtils.EPerspectiveView.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 THREE__namespace.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix),i=new THREE__namespace.Matrix4().premultiply(this.getModelTransformationMatrix(t)).premultiply(a).premultiply(this.basicCoordinate2CanvasMatrix4);this.sideMatrix=i;const o=r.map(l=>new THREE__namespace.Vector3(l.x,l.y,l.z)).map(l=>l.applyMatrix4(this.sideMatrix)),c=this.containerWidth/n,h=this.containerHeight/s;return{polygon2d:o,zoom:Math.min(c,h)/2}}getSpherePoint2DCoordinate(t){const{center:e,attribute:r,id:n,valid:s}=t,{radius:a}=lbUtils.DEFAULT_SPHERE_PARAMS,i={center:e,attribute:r,id:n,valid:s,width:a*2,height:a*2,depth:a*2,rotation:0},o=new THREE__namespace.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix),c=new THREE__namespace.Matrix4().premultiply(this.getModelTransformationMatrix(i)).premultiply(o).premultiply(this.basicCoordinate2CanvasMatrix4);this.sideMatrix=c;const h=new THREE__namespace.Vector3(e.x,e.y,e.z).applyMatrix4(this.sideMatrix),l=this.containerWidth/(a*2),d=this.containerHeight/(a*2);return{point2d:h,zoom:Math.min(l,d)/2}}getSphereTopPoint2DCoordinate(t){const{center:e}=t,{radius:r}=lbUtils.DEFAULT_SPHERE_PARAMS,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 THREE__namespace.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 THREE__namespace.Matrix4().makeRotationZ(n.rotation),a=new THREE__namespace.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=__spreadProps(__spreadValues({},i),{width:i.width+e,height:i.height,depth:i.depth+r}),{newBoxParams:i}}getNewBoxByBackUpdate(t,e,r,n){const s=new THREE__namespace.Matrix4().makeRotationZ(n.rotation),a=new THREE__namespace.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=__spreadProps(__spreadValues({},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(u=>new THREE__namespace.Vector3(u.x,u.y,u.z)).map(u=>u.applyMatrix4(a)),[o,c,h,l]=i,d=Math.max(Math.abs(o.x-h.x),Math.abs(o.x-c.x)),x=c.add(l).applyMatrix3(new THREE__namespace.Matrix3().set(1/2,0,0,0,1/2,0,0,0,1/2)).clone().applyMatrix3(new THREE__namespace.Matrix3().set(-1,0,0,0,-1,0,0,0,-1)).add(new THREE__namespace.Vector3(n.center.x,n.center.y,n.center.z));return{newBoxParams:__spreadProps(__spreadValues({},n),{center:{x:n.center.x-x.x,y:n.center.y-x.y,z:n.center.z-r},width:d,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 THREE__namespace.Float32BufferAttribute(s,1)),e.geometry.attributes.visibility.needsUpdate=!0}}render(){this.renderer.render(this.scene,this.camera)}}exports.createThreeMatrix4=matrix.createThreeMatrix4,exports.getCuboidFromPointCloudBox=matrix.getCuboidFromPointCloudBox,exports.lidar2image=matrix.lidar2image,exports.pointCloudLidar2image=matrix.pointCloudLidar2image,exports.rotatePoint=matrix.rotatePoint,exports.transferKitti2Matrix=matrix.transferKitti2Matrix,exports.PointCloud=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__namespace.BufferGeometry();
+      geometry.setAttribute("position", new THREE__namespace.BufferAttribute(points, 3));
+      geometry.setAttribute("color", new THREE__namespace.BufferAttribute(color, 3));
+      const newPoints = new THREE__namespace.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__namespace.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__namespace.Vector3(1, 0, 0);
+      const origin = new THREE__namespace.Vector3(width / 2, 0, 0);
+      const arrowLen = 2;
+      const hex = 16776960;
+      const arrowHelper = new THREE__namespace.ArrowHelper(dir, origin, arrowLen, hex);
+      arrowHelper.visible = this.showDirection;
+      return arrowHelper;
+    };
+    this.generateBoxTrackID = (boxParams) => {
+      if (!boxParams.trackID) {
+        return;
+      }
+      const texture = new THREE__namespace.Texture(this.getTextCanvas(boxParams.trackID.toString()));
+      texture.needsUpdate = true;
+      const sprite = new THREE__namespace.SpriteMaterial({map: texture, depthWrite: false});
+      const boxID = new THREE__namespace.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__namespace.WebGLRenderer({antialias: true});
+    this.backgroundColor = backgroundColor;
+    this.config = config;
+    if (isOrthographicCamera && orthographicParams) {
+      this.isOrthographicCamera = true;
+      this.camera = new THREE__namespace.OrthographicCamera(orthographicParams.left, orthographicParams.right, orthographicParams.top, orthographicParams.bottom, orthographicParams.near, orthographicParams.far);
+    } else {
+      this.camera = new THREE__namespace.PerspectiveCamera(30, this.containerWidth / this.containerHeight, 1, 1e3);
+    }
+    this.initCamera();
+    this.scene = new THREE__namespace.Scene();
+    this.controls = new OrbitControls.OrbitControls(this.camera, this.renderer.domElement);
+    this.pcdLoader = new PCDLoader.PCDLoader();
+    this.axesHelper = new THREE__namespace.AxesHelper(1e3);
+    this.scene.add(this.camera);
+    if (!noAppend) {
+      container.appendChild(this.renderer.domElement);
+    }
+    this.init();
+    this.cacheInstance = cache.PointCloudCache.getInstance();
+  }
+  get DEFAULT_INIT_CAMERA_POSITION() {
+    return new THREE__namespace.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__namespace.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__namespace.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] = lbUtils.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__namespace.Vector3(customCameraVector.x, customCameraVector.y, customCameraVector.z);
+    }
+    this.updateCamera(cameraPositionVector, center);
+    return cameraPositionVector;
+  }
+  updateCameraBySphere(sphereParams, perspectiveView) {
+    const {center} = sphereParams;
+    const {radius} = lbUtils.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__namespace.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__namespace.Vector3(0, 0, -1).applyQuaternion(camera.quaternion);
+    const target = camera.position.clone().add(direction);
+    return target;
+  }
+  createThreeMatrix4(matrix4) {
+    return new THREE__namespace.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} = matrix.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$1 = new filterBoxWorker();
+        filterBoxWorker$1.postMessage(params);
+        filterBoxWorker$1.onmessage = (e) => {
+          const {color: newColor, position: newPosition, num} = e.data;
+          const geometry = new THREE__namespace.BufferGeometry();
+          geometry.setAttribute("position", new THREE__namespace.Float32BufferAttribute(newPosition, 3));
+          geometry.setAttribute("color", new THREE__namespace.Float32BufferAttribute(newColor, 3));
+          geometry.computeBoundingSphere();
+          filterBoxWorker$1.terminate();
+          resolve({geometry, num});
+        };
+      });
+    }
+    return Promise.resolve(void 0);
+  }
+  getCameraVector(centerPoint, rotationZ, volume, perspectiveView = lbUtils.EPerspectiveView.Front, defaultDistance = DEFAULT_DISTANCE) {
+    let TcMatrix4 = lbUtils.PerspectiveShiftUtils.frontViewMatrix4(defaultDistance);
+    switch (perspectiveView) {
+      case lbUtils.EPerspectiveView.Front:
+        break;
+      case lbUtils.EPerspectiveView.Back:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.backViewMatrix4(defaultDistance);
+        break;
+      case lbUtils.EPerspectiveView.Left:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.leftViewMatrix4(defaultDistance);
+        break;
+      case lbUtils.EPerspectiveView.Right:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.rightViewMatrix4(defaultDistance);
+        break;
+      case lbUtils.EPerspectiveView.Top:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.topViewMatrix4(defaultDistance);
+        break;
+      case lbUtils.EPerspectiveView.LFT:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.leftFrontTopViewMatrix4(defaultDistance, volume);
+        break;
+      case lbUtils.EPerspectiveView.RBT:
+        TcMatrix4 = lbUtils.PerspectiveShiftUtils.rightBackTopViewMatrix4(defaultDistance, volume);
+        break;
+    }
+    const Tc = this.createThreeMatrix4(TcMatrix4);
+    const TFrom = new THREE__namespace.Matrix4().makeTranslation(-centerPoint.x, -centerPoint.y, -centerPoint.z);
+    const TBack = new THREE__namespace.Matrix4().makeTranslation(centerPoint.x, centerPoint.y, centerPoint.z);
+    const Rz = new THREE__namespace.Matrix4().makeRotationZ(rotationZ);
+    const centerVector = new THREE__namespace.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__namespace.EllipseCurve(0, 0, radius, radius, 0, 2 * Math.PI, false, 0);
+    const points = curve.getPoints(50);
+    const geometry = new THREE__namespace.BufferGeometry().setFromPoints(points);
+    const material = new THREE__namespace.LineBasicMaterial({color: 16711680});
+    const ellipse = new THREE__namespace.Line(geometry, material);
+    ellipse.name = this.rangeObjectName;
+    return ellipse;
+  }
+  renderPointCloud(points, radius) {
+    points.name = this.pointCloudObjectName;
+    const pointsMaterial = new THREE__namespace.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) => matrix.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__namespace.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__namespace.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["default"].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 lbUtils.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 = polygonTool.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__namespace.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__namespace.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__namespace.Matrix4().makeTranslation(-x, -y, -z);
+    const TBack = new THREE__namespace.Matrix4().makeTranslation(x, y, z);
+    const Rz = new THREE__namespace.Matrix4().makeRotationZ(rotation);
+    return new THREE__namespace.Matrix4().multiply(TBack).multiply(Rz).multiply(TFrom);
+  }
+  getBoxSidePolygon2DCoordinate(boxParams) {
+    return this.getBoxPolygon2DCoordinate(boxParams, lbUtils.EPerspectiveView.Left);
+  }
+  getBoxBackPolygon2DCoordinate(boxParams) {
+    return this.getBoxPolygon2DCoordinate(boxParams, lbUtils.EPerspectiveView.Back);
+  }
+  getSphereSidePoint2DCoordinate(sphereParams) {
+    return this.getSpherePoint2DCoordinate(sphereParams);
+  }
+  getSphereBackPoint2DCoordinate(sphereParams) {
+    return this.getSpherePoint2DCoordinate(sphereParams);
+  }
+  boxParams2ViewPolygon(boxParams, perspectiveView) {
+    switch (perspectiveView) {
+      case lbUtils.EPerspectiveView.Left:
+        return this.getPolygonSidePoints(boxParams);
+      case lbUtils.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__namespace.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix);
+    const boxSideMatrix = new THREE__namespace.Matrix4().premultiply(this.getModelTransformationMatrix(boxParams)).premultiply(projectMatrix).premultiply(this.basicCoordinate2CanvasMatrix4);
+    this.sideMatrix = boxSideMatrix;
+    const polygon2d = vectorList.map((vector) => new THREE__namespace.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} = lbUtils.DEFAULT_SPHERE_PARAMS;
+    const transParams = {
+      center,
+      attribute,
+      id,
+      valid,
+      width: radius * 2,
+      height: radius * 2,
+      depth: radius * 2,
+      rotation: 0
+    };
+    const projectMatrix = new THREE__namespace.Matrix4().premultiply(this.camera.matrixWorldInverse).premultiply(this.camera.projectionMatrix);
+    const boxSideMatrix = new THREE__namespace.Matrix4().premultiply(this.getModelTransformationMatrix(transParams)).premultiply(projectMatrix).premultiply(this.basicCoordinate2CanvasMatrix4);
+    this.sideMatrix = boxSideMatrix;
+    const point2d = new THREE__namespace.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} = lbUtils.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__namespace.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__namespace.Matrix4().makeRotationZ(selectedPointCloudBox.rotation);
+    const offsetVector = new THREE__namespace.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__namespace.Matrix4().makeRotationZ(selectedPointCloudBox.rotation);
+    const offsetVector = new THREE__namespace.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__namespace.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__namespace.Matrix3().set(1 / 2, 0, 0, 0, 1 / 2, 0, 0, 0, 1 / 2));
+    const offsetVector = centerVector.clone().applyMatrix3(new THREE__namespace.Matrix3().set(-1, 0, 0, 0, -1, 0, 0, 0, -1)).add(new THREE__namespace.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__namespace.Float32BufferAttribute(visibility, 1));
+      points.geometry.attributes.visibility.needsUpdate = true;
+    }
+  }
+  render() {
+    this.renderer.render(this.scene, this.camera);
+  }
+}
+
+exports.createThreeMatrix4 = matrix.createThreeMatrix4;
+exports.getCuboidFromPointCloudBox = matrix.getCuboidFromPointCloudBox;
+exports.lidar2image = matrix.lidar2image;
+exports.pointCloudLidar2image = matrix.pointCloudLidar2image;
+exports.rotatePoint = matrix.rotatePoint;
+exports.transferKitti2Matrix = matrix.transferKitti2Matrix;
+exports.PointCloud = PointCloud;