fl-web-component 2.0.16 → 2.0.18

package/dist/fl-web-component.css

@@ -1 +1 @@
-@charset "UTF-8";.fl-model-containor[data-v-3e15de76]{width:100%;height:100%;position:relative;cursor:pointer}[data-v-3e15de76] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-3e15de76] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-3e15de76] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-3e15de76] .measure-label-font{word-break:break-all}[data-v-3e15de76] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-3e15de76]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;-webkit-transition:opacity .3s ease,visibility .3s ease;transition:opacity .3s ease,visibility .3s ease}.loading-overlay--visible[data-v-3e15de76]{opacity:1;visibility:visible}.loading-content[data-v-3e15de76]{background:#fff;border-radius:12px;padding:30px;text-align:center;-webkit-box-shadow:0 8px 32px rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:300px;max-width:400px}.loading-spinner[data-v-3e15de76]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-3e15de76 1s linear infinite;animation:spin-3e15de76 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-3e15de76{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-3e15de76{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-3e15de76]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-this.progress-bar[data-v-3e15de76]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-this.progress-fill[data-v-3e15de76]{height:100%;background:-webkit-gradient(linear,left top,right top,from(#409eff),to(#67c23a));background:linear-gradient(90deg,#409eff,#67c23a);border-radius:4px;-webkit-transition:width .3s ease;transition:width .3s ease}.loading-details[data-v-3e15de76]{font-size:12px;color:#666;line-height:1.5}.lil-this.gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-this.gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-this.gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-this.gui .controller:last-child{border-bottom:none!important}.lil-this.gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-this.gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-this.gui .controller .widget:focus,.lil-this.gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-this.gui .controller .widget:focus{outline:none!important}.lil-this.gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-this.gui .controller.number .fill{border-right:solid #008de9}.lil-this.gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-this.gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-this.gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-this.gui .controller .option:hover{background:#f8f9fa!important}.lil-this.gui .controller .option:last-child{border-bottom:none!important}.lil-this.gui input:active{background:#e6eff4}.lil-this.gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-this.gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-this.gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-this.gui .controller.number .slider,.lil-this.gui .controller.number .slider:hover{background-color:#e6eff4}.lil-this.gui input,.lil-this.gui input:hover,.lil-this.gui input[type=number]:focus,.lil-this.gui input[type=text]:focus{background:#e6eff4}.lil-this.gui .controller>.name{min-width:25px}.lil-this.gui .controller.number input{color:#2e3136}.lil-this.gui .controller.number .slider:active{background-color:#e6eff4}.lil-this.gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-this.gui .folder>.title:before{color:#6c757d!important}.lil-this.gui .folder.closed>.children{display:none!important}#konva-container[data-v-b313ab6c]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}.main_body[data-v-4b17bce0]{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.classification_title[data-v-4b17bce0]{margin:0 0 10px 0;color:#fff;font-size:14px;cursor:default}.toolbar[data-v-4b17bce0]{z-index:10;position:absolute;width:520px;padding:8px 16px;border-radius:6px;-webkit-box-shadow:0 2px 10px 0 rgba(6,29,44,.25);box-shadow:0 2px 10px 0 rgba(6,29,44,.25);background-color:#fff;top:10px;left:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.icon_toolbar[data-v-4b17bce0],.text_toolbar[data-v-4b17bce0]{float:left;width:32px;height:32px;padding:0!important;background-repeat:no-repeat;background-size:24px;background-position:50%}.icon_active[data-v-4b17bce0],.icon_toolbar[data-v-4b17bce0]:hover,.text_toolbar[data-v-4b17bce0]:hover{background-color:#eee}[data-v-4b17bce0].icon_color .el-color-picker__trigger{height:24px;margin-top:4px;width:24px!important}[data-v-4b17bce0].el-color-picker--medium,[data-v-4b17bce0].el-color-picker--medium .el-color-picker__trigger{width:24px!important;height:24px!important}.canvas_container[data-v-4b17bce0]{position:relative;width:100%;height:100%;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.canvas_container canvas[data-v-4b17bce0]{position:absolute;left:0}.canvas_container #ctx_front[data-v-4b17bce0]{z-index:5;background-color:transparent}.canvas_container #ctx_back[data-v-4b17bce0]{z-index:3}.canvas_container #ctx_base[data-v-4b17bce0]{z-index:1}#text[data-v-4b17bce0]{position:absolute;z-index:-1;resize:none;outline:none;border:1px dashed #9c9c9c;overflow:hidden;background:transparent;line-height:30px;display:none}#text[data-v-4b17bce0]:hover{border:1px dashed #53a8ff}#svg-component[data-v-2572c0e2],#svg-tigger[data-v-2572c0e2]{cursor:pointer;height:100%;width:100%;position:relative}#toolbar-show[data-v-2572c0e2]{z-index:20;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;background:#fff}
+@charset "UTF-8";.fl-model-containor[data-v-7fad0c6c]{width:100%;height:100%;position:relative;cursor:pointer}[data-v-7fad0c6c] .tips-label{width:60px;color:#000;font:12px Helvetica;margin-top:-3em;padding:5px;text-align:center;vertical-align:middle;background-color:khaki}[data-v-7fad0c6c] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;-webkit-box-shadow:0 1px 3px 1px rgba(0,0,0,.25);box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-7fad0c6c] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-7fad0c6c] .measure-label-font{word-break:break-all}[data-v-7fad0c6c] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-7fad0c6c]{position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;-webkit-transition:opacity .3s ease,visibility .3s ease;transition:opacity .3s ease,visibility .3s ease}.loading-overlay--visible[data-v-7fad0c6c]{opacity:1;visibility:visible}.loading-content[data-v-7fad0c6c]{background:#fff;border-radius:12px;padding:30px;text-align:center;-webkit-box-shadow:0 8px 32px rgba(0,0,0,.3);box-shadow:0 8px 32px rgba(0,0,0,.3);min-width:300px;max-width:400px}.loading-spinner[data-v-7fad0c6c]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-7fad0c6c 1s linear infinite;animation:spin-7fad0c6c 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-7fad0c6c{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-7fad0c6c{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-7fad0c6c]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-this.progress-bar[data-v-7fad0c6c]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-this.progress-fill[data-v-7fad0c6c]{height:100%;background:-webkit-gradient(linear,left top,right top,from(#409eff),to(#67c23a));background:linear-gradient(90deg,#409eff,#67c23a);border-radius:4px;-webkit-transition:width .3s ease;transition:width .3s ease}.loading-details[data-v-7fad0c6c]{font-size:12px;color:#666;line-height:1.5}.lil-this.gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!important;-webkit-box-shadow:0 4px 12px rgba(0,0,0,.15)!important;box-shadow:0 4px 12px rgba(0,0,0,.15)!important;backdrop-filter:blur(10px)!important;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif!important}.lil-this.gui .title{background:linear-gradient(135deg,#f8f9fa,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important;font-weight:600!important;padding:0 12px!important;border-radius:8px 8px 0 0!important}.lil-this.gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-this.gui .controller:last-child{border-bottom:none!important}.lil-this.gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-this.gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-this.gui .controller .widget:focus,.lil-this.gui .controller .widget:hover{border-color:#80bdff!important;-webkit-box-shadow:0 0 0 2px rgba(0,123,255,.25)!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-this.gui .controller .widget:focus{outline:none!important}.lil-this.gui .controller input[type=range]{background:#e9ecef!important;height:4px!important;-webkit-appearance:none!important;-moz-appearance:none!important;appearance:none!important;border-radius:2px!important}.lil-this.gui .controller.number .fill{border-right:solid #008de9}.lil-this.gui .controller input[type=range]::-webkit-slider-thumb{background:#007bff!important;border:2px solid #fff!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.2)!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-this.gui .controller input[type=range]::-moz-range-thumb{background:#007bff!important;border:2px solid #fff!important;box-shadow:0 2px 4px rgba(0,0,0,.2)!important;width:16px!important;height:16px!important;border-radius:50%!important;cursor:pointer!important}.lil-this.gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-this.gui .controller .option:hover{background:#f8f9fa!important}.lil-this.gui .controller .option:last-child{border-bottom:none!important}.lil-this.gui input:active{background:#e6eff4}.lil-this.gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;-webkit-transition:all .2s ease!important;transition:all .2s ease!important}.lil-this.gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;-webkit-transform:translateY(-1px)!important;transform:translateY(-1px)!important;-webkit-box-shadow:0 4px 8px rgba(0,123,255,.3)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-this.gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.1)!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-this.gui .controller.number .slider,.lil-this.gui .controller.number .slider:hover{background-color:#e6eff4}.lil-this.gui input,.lil-this.gui input:hover,.lil-this.gui input[type=number]:focus,.lil-this.gui input[type=text]:focus{background:#e6eff4}.lil-this.gui .controller>.name{min-width:25px}.lil-this.gui .controller.number input{color:#2e3136}.lil-this.gui .controller.number .slider:active{background-color:#e6eff4}.lil-this.gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-this.gui .folder>.title:before{color:#6c757d!important}.lil-this.gui .folder.closed>.children{display:none!important}#konva-container[data-v-b313ab6c]{z-index:3;width:100%;height:100%;cursor:pointer;overflow:hidden}span[data-v-f547d5c6]{font-weight:bolder}.text[data-v-f547d5c6]{margin-top:20px}.line[data-v-f547d5c6]{border-bottom:1px solid #dcdfe6;margin:20px 0}.center[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.center .cen span[data-v-f547d5c6],.center .top span[data-v-f547d5c6]{color:"#53a8ff";display:inline-block;width:30px;height:30px;text-align:center;line-height:30px;border:1px solid;padding:5px;margin-bottom:10px;background-color:#e9f3ff}.center .cen span[data-v-f547d5c6]{margin:10px}.button[data-v-f547d5c6]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:end;margin-top:20px}@font-face{font-family:iconfont;src:url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff2?t=1646635700216) format("woff2"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.woff?t=1646635700216) format("woff"),url(//at.alicdn.com/t/font_3226805_qqvo3ag3r8.ttf?t=1646635700216) format("truetype")}.iconfont[data-v-f547d5c6]{font-family:iconfont!important;font-size:50px;font-style:normal;color:"#53a8ff";-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-shubiao[data-v-f547d5c6]:before{content:""}.main_body[data-v-4b17bce0]{position:relative;width:100%;height:100%;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.classification_title[data-v-4b17bce0]{margin:0 0 10px 0;color:#fff;font-size:14px;cursor:default}.toolbar[data-v-4b17bce0]{z-index:10;position:absolute;width:520px;padding:8px 16px;border-radius:6px;-webkit-box-shadow:0 2px 10px 0 rgba(6,29,44,.25);box-shadow:0 2px 10px 0 rgba(6,29,44,.25);background-color:#fff;top:10px;left:50%;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around}.icon_toolbar[data-v-4b17bce0],.text_toolbar[data-v-4b17bce0]{float:left;width:32px;height:32px;padding:0!important;background-repeat:no-repeat;background-size:24px;background-position:50%}.icon_active[data-v-4b17bce0],.icon_toolbar[data-v-4b17bce0]:hover,.text_toolbar[data-v-4b17bce0]:hover{background-color:#eee}[data-v-4b17bce0].icon_color .el-color-picker__trigger{height:24px;margin-top:4px;width:24px!important}[data-v-4b17bce0].el-color-picker--medium,[data-v-4b17bce0].el-color-picker--medium .el-color-picker__trigger{width:24px!important;height:24px!important}.canvas_container[data-v-4b17bce0]{position:relative;width:100%;height:100%;overflow:auto;-webkit-box-sizing:border-box;box-sizing:border-box}.canvas_container canvas[data-v-4b17bce0]{position:absolute;left:0}.canvas_container #ctx_front[data-v-4b17bce0]{z-index:5;background-color:transparent}.canvas_container #ctx_back[data-v-4b17bce0]{z-index:3}.canvas_container #ctx_base[data-v-4b17bce0]{z-index:1}#text[data-v-4b17bce0]{position:absolute;z-index:-1;resize:none;outline:none;border:1px dashed #9c9c9c;overflow:hidden;background:transparent;line-height:30px;display:none}#text[data-v-4b17bce0]:hover{border:1px dashed #53a8ff}#svg-component[data-v-2572c0e2],#svg-tigger[data-v-2572c0e2]{cursor:pointer;height:100%;width:100%;position:relative}#toolbar-show[data-v-2572c0e2]{z-index:20;position:absolute;width:100%;height:100%;top:0;left:0;overflow:hidden;background:#fff}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "2.0.16",
+  "version": "2.0.18",
   "scripts": {
     "postinstall": "patch-package",
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",

package/packages/components/com-graphics/index.vue

@@ -135,6 +135,7 @@ import MeasureDistance from '@/utils/threejs/measure-distance.js';
 import MeasureArea from '@/utils/threejs/measure-area.js';
 import MeasureAngle from '@/utils/threejs/measure-angle.js';
 import MeasureHeight from '@/utils/threejs/measure-height.js';
+import MeasureClearDistance from '@/utils/threejs/measure-clear-distance.js';
 import { parseData, processMeshData, processNodeData } from '@/utils/flgltf-parser';
 import {
   handleInstancedMeshModel,
@@ -5672,6 +5673,12 @@ export default {
     /*
       参数: type: '', distance、area、angle、height, 暂时只提供距离、面积、角度、高度这四种方式
       */
+    getMeasurePickRoots() {
+      if (this.modelGroup && this.modelGroup.children && this.modelGroup.children.length > 0) {
+        return [this.modelGroup];
+      }
+      return this.scene && this.scene.children ? this.scene.children : [];
+    },
     openMeasure(type, isClear = false) {
       if (this.threeMeasure) {
         this.threeMeasure.close(isClear);
@@ -5686,7 +5693,10 @@ export default {
             this.scene,
             this.camera,
             this.instructions.offsetWidth,
-            this.instructions.offsetHeight
+            this.instructions.offsetHeight,
+            {
+              pickRoots: () => this.getMeasurePickRoots(),
+            }
           );
           this.threeMeasure.start();
           break;
@@ -5696,7 +5706,10 @@ export default {
             this.scene,
             this.camera,
             this.instructions.offsetWidth,
-            this.instructions.offsetHeight
+            this.instructions.offsetHeight,
+            {
+              pickRoots: () => this.getMeasurePickRoots(),
+            }
           );
           this.threeMeasure.start();
           break;
@@ -5706,12 +5719,28 @@ export default {
             this.scene,
             this.camera,
             this.instructions.offsetWidth,
-            this.instructions.offsetHeight
+            this.instructions.offsetHeight,
+            {
+              pickRoots: () => this.getMeasurePickRoots(),
+            }
           );
           this.threeMeasure.start();
           break;
         case 'height':
           this.threeMeasure = new MeasureHeight.MeasureHeight(
+            this.renderer,
+            this.scene,
+            this.camera,
+            this.instructions.offsetWidth,
+            this.instructions.offsetHeight,
+            {
+              pickRoots: () => this.getMeasurePickRoots(),
+            }
+          );
+          this.threeMeasure.start();
+          break;
+        case 'clearDistance':
+          this.threeMeasure = new MeasureClearDistance.MeasureClearDistance(
             this.renderer,
             this.scene,
             this.camera,
@@ -5735,19 +5764,52 @@ export default {
       // 移除键盘事件监听器
       document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
     },
-    // 增加一个清除所有测量结果的方法 使用统一名字的
-    clearMeasureByName() {
-      let list = this.getObjectByName('measureObj');
-      list.forEach(item => {
-        if (item.geometry) {
-          item.geometry.dispose();
-          item.material.dispose();
+    disposeMeasureObject(object) {
+      if (!object) return;
+      if (object.geometry) {
+        object.geometry.dispose();
+      }
+      if (Array.isArray(object.material)) {
+        object.material.forEach(material => {
+          material && material.dispose && material.dispose();
+        });
+      } else if (object.material && object.material.dispose) {
+        object.material.dispose();
+      }
+      if (object.element && object.element.parentNode) {
+        object.element.parentNode.removeChild(object.element);
+      }
+    },
+    isMeasureObject(object) {
+      if (!object) return false;
+      const userData = object.userData || {};
+      return object.name === 'measureObj' || userData.isMeasureObject === true;
+    },
+    removeMeasureObjectsFromScene() {
+      if (!this.scene) return;
+      const measureObjects = [];
+      this.scene.traverse(object => {
+        if (this.isMeasureObject(object)) {
+          measureObjects.push(object);
         }
-        if (this.scene) this.scene.remove(item);
       });
+      measureObjects.forEach(object => {
+        if (object.parent) {
+          object.parent.remove(object);
+        } else {
+          this.scene.remove(object);
+        }
+        this.disposeMeasureObject(object);
+      });
+    },
+    // 增加一个清除所有测量结果的方法，清理历史测量实例遗留的对象
+    clearMeasureByName() {
       if (this.threeMeasure) {
         this.threeMeasure.clear();
       }
+      this.removeMeasureObjectsFromScene();
+      // this.measureFlag = false;
+      document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
     },
     handleMeasureKeyDown(event) {
       // 检查是否按下了ESC键

package/src/utils/threejs/measure-angle.js

@@ -2,10 +2,11 @@ import * as THREE from 'three';
 import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
 import { Message } from 'element-ui';
 var _this = null;
-var MeasureAngle = function (renderer, scene, camera, width, height) {
+var MeasureAngle = function (renderer, scene, camera, width, height, options = {}) {
   this.renderer = renderer;
   this.scene = scene;
   this.camera = camera;
+  this.pickRoots = options.pickRoots || null;
   this.pointArray = []; // 保存当前操作所添加的点
   this.raycaster = new THREE.Raycaster();
   this.points = []; // 保存页面中所添加的点
@@ -17,6 +18,7 @@ var MeasureAngle = function (renderer, scene, camera, width, height) {
   this.tempLabel = undefined;
   this.tipsLabel = undefined;
   this.isCompleted = false;
+  this.hasTempPoint = false;
   this.curveLine = undefined;
   this.timer = null;
   this.width = width;
@@ -24,7 +26,7 @@ var MeasureAngle = function (renderer, scene, camera, width, height) {
   this.firstTime = 0;
   // 创建一个辅助平面来捕获鼠标事件
   this.plane = new THREE.Plane(new THREE.Vector3(0, 0, 1), 0);
-  this.measureName = 'measureObj'
+  this.measureName = 'measureObj';
   // this.POINT_MATERIAL = new THREE.PointsMaterial({ color: 0xff5000, size: 1, opacity: 0.6, transparent: true, depthWrite: false, depthTest: false })
   // this.LINE_MATERIAL = new THREE.LineBasicMaterial({ color: 0xff0000, linewidth: 3, opacity: 0.8, transparent: true, side: THREE.DoubleSide, depthWrite: false, depthTest: false })
 };
@@ -45,7 +47,107 @@ MeasureAngle.prototype = {
     this.width = width;
     this.height = height;
   },
-  getPosition(e) {
+  getPickRoots() {
+    const roots = typeof _this.pickRoots === 'function' ? _this.pickRoots() : _this.pickRoots;
+    if (Array.isArray(roots) && roots.length > 0) {
+      return roots.filter(Boolean);
+    }
+    if (roots) {
+      return [roots];
+    }
+    return _this.scene && _this.scene.children ? _this.scene.children : [];
+  },
+  isExcludedIntersection(object) {
+    let current = object;
+    while (current) {
+      const userData = current.userData || {};
+      if (current.visible === false) return true;
+      if (current.name === _this.measureName || userData.isMeasureObject === true) return true;
+      if (userData.transformControlHelper === true || userData.outlineProxy === true) return true;
+      if (current.isCamera || current.isLight) return true;
+      if (
+        typeof current.type === 'string' &&
+        (/Helper$/i.test(current.type) ||
+          current.type === 'CSS2DObject' ||
+          current.type === 'TransformControlsRoot')
+      ) {
+        return true;
+      }
+      current = current.parent;
+    }
+    return false;
+  },
+  markMeasureObject(object) {
+    object.name = this.measureName;
+    if (!object.userData) {
+      object.userData = {};
+    }
+    object.userData.isMeasureObject = true;
+    return object;
+  },
+  disposeObject(object) {
+    if (!object) return;
+    if (object.geometry) {
+      object.geometry.dispose();
+    }
+    if (object.material) {
+      object.material.dispose();
+    }
+    this.scene.remove(object);
+  },
+  removeArrayItem(array, item) {
+    if (!item) return;
+    const index = array.indexOf(item);
+    if (index !== -1) {
+      array.splice(index, 1);
+    }
+  },
+  clearTempMeasure() {
+    if (this.hasTempPoint && this.pointArray.length > 0) {
+      this.pointArray.pop();
+    }
+    this.removeArrayItem(this.points, this.tempPoints);
+    this.removeArrayItem(this.polyline, this.tempLine);
+    this.disposeObject(this.tempPoints);
+    this.disposeObject(this.tempLine);
+    this.tempPoints = undefined;
+    this.tempLine = undefined;
+    this.hasTempPoint = false;
+    this.updateAngleMeasure();
+  },
+  updateAngleMeasure() {
+    if (this.pointArray.length !== 3) {
+      this.removeArrayItem(this.labels, this.tempLabel);
+      this.removeArrayItem(this.curves, this.curveLine);
+      this.disposeObject(this.tempLabel);
+      this.disposeObject(this.curveLine);
+      this.tempLabel = undefined;
+      this.curveLine = undefined;
+      return;
+    }
+    const angle = this.calculateAngle().toFixed(2) + '°';
+    const p0 = this.pointArray[0];
+    const p1 = this.pointArray[1];
+    const p2 = this.pointArray[2];
+    const v1 = new THREE.Vector3((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, (p0.z + p1.z) / 2);
+    const v2 = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
+    const curve = new THREE.CatmullRomCurve3([v1, v2]);
+    const points = curve.getPoints(50);
+    if (this.tempLabel) {
+      this.tempLabel.element.textContent = angle;
+      this.tempLabel.position.set(p1.x, p1.y, p1.z);
+    } else {
+      this.tempLabel = this.createLabel('measure-label', angle, p1);
+      this.labels.push(this.tempLabel);
+      this.scene.add(this.tempLabel);
+    }
+    if (this.curveLine) {
+      this.curveLine.geometry.setFromPoints(points);
+    } else {
+      this.createCurve(points);
+    }
+  },
+  getPosition(e, options = {}) {
     const mouse = new THREE.Vector2();
     const elRect = this.renderer.domElement.getBoundingClientRect();
     const canvasX = e.clientX - elRect.left;
@@ -55,11 +157,17 @@ MeasureAngle.prototype = {
     mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
 
     _this.raycaster.setFromCamera(mouse, this.camera);
-    let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
+    let intersects = _this.raycaster
+      .intersectObjects(_this.getPickRoots(), true)
+      .filter(item => item && item.object && !_this.isExcludedIntersection(item.object));
     if (intersects.length > 0) {
       return { point: intersects[0].point, isModel: true };
     }
 
+    if (options.allowPlaneFallback === false) {
+      return null;
+    }
+
     // 如果没有交点，构建一个基于最后一个确认点且面向相机的平面
     if (_this.pointArray && _this.pointArray.length > 0) {
       const lastPoint =
@@ -89,7 +197,7 @@ MeasureAngle.prototype = {
     const geom = new THREE.SphereGeometry(config.size || 0.3, 28, 28);
     const sphere = new THREE.Mesh(geom, mesh);
     sphere.frustumCulled = false;
-    sphere.name = this.measureName
+    this.markMeasureObject(sphere);
     sphere.position.set(pos.x, pos.y, pos.z);
     return sphere;
   },
@@ -103,7 +211,7 @@ MeasureAngle.prototype = {
     });
     const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
     const line = new THREE.Line(lineGeometry, lineMaterial);
-    line.name = this.measureName;
+    this.markMeasureObject(line);
     line.renderOrder = 999;
     line.frustumCulled = false;
     return line;
@@ -113,18 +221,28 @@ MeasureAngle.prototype = {
     div.className = name;
     div.textContent = text;
     const divLabel = new CSS2DObject(div);
-    divLabel.name = this.measureName
+    this.markMeasureObject(divLabel);
     divLabel.position.set(position.x, position.y, position.z);
     return divLabel;
   },
   mousemove(e) {
-    if (_this.isCompleted || _this.pointArray.length === 0) return;
+    if (_this.isCompleted || _this.pointArray.length === 0) {
+      const positionResult = _this.getPosition(e);
+      if (positionResult && _this.tipsLabel) {
+        _this.updateTipsLabelPosition(positionResult.point);
+      }
+      return;
+    }
+    if (_this.pointArray.length >= 3 && !_this.hasTempPoint) return;
     const positionResult = _this.getPosition(e);
     if (positionResult) {
       const point = positionResult.point;
-      _this.pointArray.length === 1
-        ? _this.pointArray.push(point)
-        : _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      if (_this.hasTempPoint) {
+        _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+      } else {
+        _this.pointArray.push(point);
+        _this.hasTempPoint = true;
+      }
       const length = _this.pointArray.length;
       const p1 = _this.pointArray[length - 2];
       const p2 = _this.pointArray[length - 1];
@@ -143,38 +261,21 @@ MeasureAngle.prototype = {
         _this.polyline.push(_this.tempLine);
         _this.scene.add(_this.tempLine);
       }
-      // 三点构成一个角
-      if (_this.pointArray.length === 3) {
-        const angle = _this.calculateAngle().toFixed(2) + '°';
-        const p0 = _this.pointArray[0];
-        const p1 = _this.pointArray[1];
-        const p2 = _this.pointArray[2];
-        const v1 = new THREE.Vector3((p0.x + p1.x) / 2, (p0.y + p1.y) / 2, (p0.z + p1.z) / 2);
-        const v2 = new THREE.Vector3((p1.x + p2.x) / 2, (p1.y + p2.y) / 2, (p1.z + p2.z) / 2);
-        const curve = new THREE.CatmullRomCurve3([v1, v2]);
-        const points = curve.getPoints(50);
-        if (_this.tempLabel) {
-          _this.tempLabel.element.textContent = angle;
-          _this.tempLabel.position.set(p1.x, p1.y, p1.z);
-          _this.curveLine.geometry.setFromPoints(points);
-        } else {
-          _this.tempLabel = _this.createLabel('measure-label', angle, p1);
-          _this.labels.push(_this.tempLabel);
-          _this.scene.add(_this.tempLabel);
-          _this.createCurve(points);
-        }
-      }
+      _this.updateAngleMeasure();
       if (_this.tipsLabel) {
-        _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
+        _this.updateTipsLabelPosition(point);
       }
     }
   },
+  updateTipsLabelPosition(position) {
+    this.tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
+  },
   createTipsLabel(label, position) {
     const div = document.createElement('div');
     div.className = 'tips-label';
     div.textContent = label;
     const tipsLabel = new CSS2DObject(div);
-    tipsLabel.name = this.measureName
+    this.markMeasureObject(tipsLabel);
     tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
     return tipsLabel;
   },
@@ -190,15 +291,22 @@ MeasureAngle.prototype = {
       clearTimeout(_this.timer);
       _this.timer = setTimeout(() => {
         _this.isCompleted = false;
-        const positionResult = _this.getPosition(e);
+        const positionResult = _this.getPosition(e, { allowPlaneFallback: false });
+        if (!positionResult || !positionResult.isModel) {
+          _this.clearTempMeasure();
+          Message.warning('请点击模型进行测量');
+          return;
+        }
         if (positionResult) {
-          const { point, isModel } = positionResult;
-          if (!isModel) {
-            Message.warning('请点击模型进行测量');
-            return;
+          const { point } = positionResult;
+          if (_this.hasTempPoint && _this.pointArray.length > 0) {
+            _this.pointArray.splice(_this.pointArray.length - 1, 1, point);
+          } else {
+            _this.pointArray.push(point);
           }
+          _this.hasTempPoint = false;
           if (_this.tipsLabel) {
-            _this.tipsLabel.position.set(point.x + 0.1, point.y, point.z + 0.05);
+            _this.updateTipsLabelPosition(point);
           } else {
             _this.tipsLabel = _this.createTipsLabel('左击绘制右击结束', point);
             _this.scene.add(_this.tipsLabel);
@@ -211,9 +319,27 @@ MeasureAngle.prototype = {
             _this.points.push(geom);
             _this.scene.add(geom);
           }
+          const length = _this.pointArray.length;
+          if (length > 1) {
+            const p1 = _this.pointArray[length - 2];
+            const p2 = _this.pointArray[length - 1];
+            if (_this.tempLine) {
+              _this.tempLine.geometry.setFromPoints([p1, p2]);
+            } else {
+              _this.tempLine = _this.createLine(p1, p2);
+              _this.polyline.push(_this.tempLine);
+              _this.scene.add(_this.tempLine);
+            }
+          }
+          _this.updateAngleMeasure();
+          if (_this.pointArray.length >= 3) {
+            _this.isCompleted = true;
+            _this.pointArray.splice(0);
+            _this.hasTempPoint = false;
+            _this.curveLine = undefined;
+          }
           _this.tempLine = undefined;
           _this.tempLabel = undefined;
-          _this.pointArray.push(point);
         }
       });
     }
@@ -227,11 +353,13 @@ MeasureAngle.prototype = {
     clearTimeout(_this.timer);
     const positionResult = _this.getPosition(e);
     if (positionResult) {
+      _this.clearTempMeasure();
       _this.isCompleted = true;
       _this.tempPoints = undefined;
       _this.tempLine = undefined;
       _this.tempLabel = undefined;
       _this.pointArray.splice(0);
+      _this.hasTempPoint = false;
       _this.renderer.domElement.removeEventListener('mousemove', _this.mousemove);
     }
   },
@@ -253,6 +381,7 @@ MeasureAngle.prototype = {
       this.tempPoints = undefined;
       this.tempLabel = undefined;
       this.tempLine = undefined;
+      this.hasTempPoint = false;
       this.scene.remove(this.tipsLabel);
       this.tipsLabel = undefined;
     }
@@ -271,6 +400,7 @@ MeasureAngle.prototype = {
     this.tempPoints = undefined;
     this.tempLabel = undefined;
     this.tempLine = undefined;
+    this.hasTempPoint = false;
     this.scene.remove(this.tipsLabel);
     this.tipsLabel = undefined;
   },
@@ -301,6 +431,7 @@ MeasureAngle.prototype = {
       transparent: true,
     });
     _this.curveLine = new THREE.Line(geom, material);
+    _this.markMeasureObject(_this.curveLine);
     _this.curveLine.renderOrder = 999;
     _this.curveLine.frustumCulled = false;
     _this.curves.push(_this.curveLine);