fl-web-component 2.0.17 → 2.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -0
- package/dist/fl-web-component.common.js +432 -47
- package/dist/fl-web-component.common.js.map +1 -1
- package/dist/fl-web-component.css +1 -1
- package/package.json +1 -1
- package/packages/components/com-graphics/index.vue +12 -1
- package/src/utils/threejs/measure-clear-distance.js +346 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";.fl-model-containor[data-v-48280acc]{width:100%;height:100%;position:relative;cursor:pointer}[data-v-48280acc] .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-48280acc] .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-48280acc] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-48280acc] .measure-label-font{word-break:break-all}[data-v-48280acc] .mark-label-img{padding-top:5px;width:20px;height:20px}.loading-overlay[data-v-48280acc]{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-48280acc]{opacity:1;visibility:visible}.loading-content[data-v-48280acc]{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-48280acc]{width:40px;height:40px;border:4px solid #f3f3f3;border-top:4px solid #409eff;border-radius:50%;-webkit-animation:spin-48280acc 1s linear infinite;animation:spin-48280acc 1s linear infinite;margin:0 auto 20px}@-webkit-keyframes spin-48280acc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}@keyframes spin-48280acc{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}.loading-text[data-v-48280acc]{font-size:16px;font-weight:500;color:#333;margin-bottom:20px}.loading-this.progress-bar[data-v-48280acc]{width:100%;height:8px;background-color:#f0f0f0;border-radius:4px;overflow:hidden;margin-bottom:15px}.loading-this.progress-fill[data-v-48280acc]{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-48280acc]{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}
|
|
1
|
+
@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
CHANGED
|
@@ -135,6 +135,7 @@ import MeasureDistance from '@/utils/threejs/measure-distance.js';
|
|
|
135
135
|
import MeasureArea from '@/utils/threejs/measure-area.js';
|
|
136
136
|
import MeasureAngle from '@/utils/threejs/measure-angle.js';
|
|
137
137
|
import MeasureHeight from '@/utils/threejs/measure-height.js';
|
|
138
|
+
import MeasureClearDistance from '@/utils/threejs/measure-clear-distance.js';
|
|
138
139
|
import { parseData, processMeshData, processNodeData } from '@/utils/flgltf-parser';
|
|
139
140
|
import {
|
|
140
141
|
handleInstancedMeshModel,
|
|
@@ -5738,6 +5739,16 @@ export default {
|
|
|
5738
5739
|
);
|
|
5739
5740
|
this.threeMeasure.start();
|
|
5740
5741
|
break;
|
|
5742
|
+
case 'clearDistance':
|
|
5743
|
+
this.threeMeasure = new MeasureClearDistance.MeasureClearDistance(
|
|
5744
|
+
this.renderer,
|
|
5745
|
+
this.scene,
|
|
5746
|
+
this.camera,
|
|
5747
|
+
this.instructions.offsetWidth,
|
|
5748
|
+
this.instructions.offsetHeight
|
|
5749
|
+
);
|
|
5750
|
+
this.threeMeasure.start();
|
|
5751
|
+
break;
|
|
5741
5752
|
}
|
|
5742
5753
|
// 添加键盘事件监听器
|
|
5743
5754
|
document.addEventListener('keydown', this.handleMeasureKeyDown, false);
|
|
@@ -5797,7 +5808,7 @@ export default {
|
|
|
5797
5808
|
this.threeMeasure.clear();
|
|
5798
5809
|
}
|
|
5799
5810
|
this.removeMeasureObjectsFromScene();
|
|
5800
|
-
this.measureFlag = false;
|
|
5811
|
+
// this.measureFlag = false;
|
|
5801
5812
|
document.removeEventListener('keydown', this.handleMeasureKeyDown, false);
|
|
5802
5813
|
},
|
|
5803
5814
|
handleMeasureKeyDown(event) {
|
|
@@ -0,0 +1,346 @@
|
|
|
1
|
+
import * as THREE from 'three';
|
|
2
|
+
import { CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer';
|
|
3
|
+
import { Message } from 'element-ui';
|
|
4
|
+
|
|
5
|
+
var _this = null;
|
|
6
|
+
var MeasureClearDistance = function (renderer, scene, camera, width, height) {
|
|
7
|
+
this.renderer = renderer;
|
|
8
|
+
this.scene = scene;
|
|
9
|
+
this.camera = camera;
|
|
10
|
+
this.pointArray = []; // 保存当前操作所添加的点
|
|
11
|
+
this.raycaster = new THREE.Raycaster();
|
|
12
|
+
this.points = []; // 保存页面中所添加的点
|
|
13
|
+
this.polyline = []; //保存页面中所添加的直线
|
|
14
|
+
this.labels = []; // 保存页面中所添加的文本
|
|
15
|
+
this.timer = null;
|
|
16
|
+
this.width = width;
|
|
17
|
+
this.height = height;
|
|
18
|
+
this.firstTime = 0;
|
|
19
|
+
this.measureName = 'measureObj'
|
|
20
|
+
this.selectedObjects = []
|
|
21
|
+
};
|
|
22
|
+
|
|
23
|
+
MeasureClearDistance.prototype = {
|
|
24
|
+
start() {
|
|
25
|
+
_this = this;
|
|
26
|
+
this.renderer.domElement.style.cursor = 'crosshair';
|
|
27
|
+
this.renderer.domElement.addEventListener('mouseup', this.click, false);
|
|
28
|
+
this.renderer.domElement.addEventListener('mousedown', this.mousedown, false);
|
|
29
|
+
},
|
|
30
|
+
updateParams(width, height) {
|
|
31
|
+
this.camera.aspect = width / height;
|
|
32
|
+
this.camera.updateProjectionMatrix();
|
|
33
|
+
this.renderer.setSize(width, height, true);
|
|
34
|
+
this.width = width;
|
|
35
|
+
this.height = height;
|
|
36
|
+
},
|
|
37
|
+
getPosition(e) {
|
|
38
|
+
const mouse = new THREE.Vector2();
|
|
39
|
+
const elRect = this.renderer.domElement.getBoundingClientRect();
|
|
40
|
+
const canvasX = e.clientX - elRect.left;
|
|
41
|
+
const canvasY = e.clientY - elRect.top;
|
|
42
|
+
|
|
43
|
+
mouse.x = (canvasX / elRect.width) * 2.0 - 1.0;
|
|
44
|
+
mouse.y = -(canvasY / elRect.height) * 2.0 + 1.0;
|
|
45
|
+
|
|
46
|
+
_this.raycaster.setFromCamera(mouse, this.camera);
|
|
47
|
+
let intersects = _this.raycaster.intersectObjects(_this.scene.children, true);
|
|
48
|
+
if (intersects.length > 0) {
|
|
49
|
+
return intersects[0]
|
|
50
|
+
}
|
|
51
|
+
return null
|
|
52
|
+
},
|
|
53
|
+
createLine(p1, p2, config = { color: 0xff0000 }) {
|
|
54
|
+
const lineMaterial = new THREE.LineBasicMaterial({
|
|
55
|
+
color: config.color,
|
|
56
|
+
linewidth: 15,
|
|
57
|
+
depthTest: false,
|
|
58
|
+
depthWrite: false,
|
|
59
|
+
transparent: true,
|
|
60
|
+
});
|
|
61
|
+
const lineGeometry = new THREE.BufferGeometry().setFromPoints([p1, p2]);
|
|
62
|
+
const line = new THREE.Line(lineGeometry, lineMaterial);
|
|
63
|
+
line.name = this.measureName;
|
|
64
|
+
line.renderOrder = 999;
|
|
65
|
+
line.frustumCulled = false;
|
|
66
|
+
return line;
|
|
67
|
+
},
|
|
68
|
+
|
|
69
|
+
createLabel(name, text, position) {
|
|
70
|
+
const div = document.createElement('div');
|
|
71
|
+
div.className = name;
|
|
72
|
+
div.textContent = text;
|
|
73
|
+
const divLabel = new CSS2DObject(div);
|
|
74
|
+
divLabel.name = this.measureName
|
|
75
|
+
divLabel.position.set(position.x, position.y, position.z);
|
|
76
|
+
return divLabel;
|
|
77
|
+
},
|
|
78
|
+
createTipsLabel(label, position) {
|
|
79
|
+
const div = document.createElement('div');
|
|
80
|
+
div.className = 'tips-label';
|
|
81
|
+
div.textContent = label;
|
|
82
|
+
const tipsLabel = new CSS2DObject(div);
|
|
83
|
+
tipsLabel.name = this.measureName
|
|
84
|
+
tipsLabel.position.set(position.x + 0.1, position.y, position.z + 0.05);
|
|
85
|
+
return tipsLabel;
|
|
86
|
+
},
|
|
87
|
+
mousedown() {
|
|
88
|
+
this.firstTime = new Date().getTime();
|
|
89
|
+
},
|
|
90
|
+
click(e) {
|
|
91
|
+
let lastTime = new Date().getTime();
|
|
92
|
+
if (lastTime - this.firstTime < 300) {
|
|
93
|
+
const measureObj = _this.getPosition(e);
|
|
94
|
+
|
|
95
|
+
if (measureObj) {
|
|
96
|
+
_this.selectedObjects.push(measureObj)
|
|
97
|
+
|
|
98
|
+
if (_this.selectedObjects.length % 2 === 0) {
|
|
99
|
+
_this.calculateClearDistance()
|
|
100
|
+
}
|
|
101
|
+
} else {
|
|
102
|
+
Message.warning('请点击模型进行测量');
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
},
|
|
106
|
+
calculateClearDistance() {
|
|
107
|
+
const l = this.selectedObjects.length;
|
|
108
|
+
// 每次都取最后两个
|
|
109
|
+
const obj1 = this.selectedObjects[l - 2];
|
|
110
|
+
const obj2 = this.selectedObjects[l - 1];
|
|
111
|
+
const isParallel = this.checkParallelism(obj1.object, obj1.instanceId, obj2.object, obj2.instanceId);
|
|
112
|
+
console.log(isParallel)
|
|
113
|
+
const pts1 = this.getInstanceSurfacePoints(obj1.object, obj1.instanceId, 600);
|
|
114
|
+
const pts2 = this.getInstanceSurfacePoints(obj2.object, obj2.instanceId, 600);
|
|
115
|
+
if (pts1.length === 0 || pts2.length === 0) {
|
|
116
|
+
return
|
|
117
|
+
}
|
|
118
|
+
const closestPair = this.findClosestPair(pts1, pts2);
|
|
119
|
+
const position = new THREE.Vector3((closestPair.point1.x + closestPair.point2.x) / 2, (closestPair.point1.y + closestPair.point2.y) / 2, (closestPair.point1.z + closestPair.point2.z) / 2);
|
|
120
|
+
// 将测量结果显示在页面中
|
|
121
|
+
const circleTag1 = this.createLabel('circle-tag', '', closestPair.point1);
|
|
122
|
+
const circleTag2 = this.createLabel('circle-tag', '', closestPair.point2);
|
|
123
|
+
const line = this.createLine(closestPair.point1, closestPair.point2)
|
|
124
|
+
const label = this.createLabel('measure-label', `${this.numberToString(closestPair.distance)}`, position)
|
|
125
|
+
this.points.push(circleTag1);
|
|
126
|
+
this.points.push(circleTag1);
|
|
127
|
+
this.polyline.push(line);
|
|
128
|
+
this.labels.push(label);
|
|
129
|
+
this.scene.add(circleTag1);
|
|
130
|
+
this.scene.add(circleTag2);
|
|
131
|
+
this.scene.add(line);
|
|
132
|
+
this.scene.add(label);
|
|
133
|
+
},
|
|
134
|
+
getInstanceSurfacePoints(instancedMesh, instanceId, maxPoints = 1000) {
|
|
135
|
+
const geometry = instancedMesh.geometry;
|
|
136
|
+
// let localPoints = this.generateGenericLocalPoints(geometry, maxPoints);
|
|
137
|
+
let localPoints = this.sampleGeometrySurface(geometry, maxPoints);
|
|
138
|
+
const worldMatrix = this.getInstanceWorldMatrix(instancedMesh, instanceId);
|
|
139
|
+
const worldPoints = localPoints.map(p => p.clone().applyMatrix4(worldMatrix));
|
|
140
|
+
return worldPoints.slice(0, maxPoints);
|
|
141
|
+
},
|
|
142
|
+
sampleGeometrySurface(geometry, maxPoints = 600) {
|
|
143
|
+
const positions = geometry.getAttribute('position');
|
|
144
|
+
if (!positions) return [];
|
|
145
|
+
|
|
146
|
+
// 获取三角形(优先使用索引)
|
|
147
|
+
let triangles = [];
|
|
148
|
+
if (geometry.index) {
|
|
149
|
+
const index = geometry.index.array;
|
|
150
|
+
for (let i = 0; i < index.length; i += 3) {
|
|
151
|
+
const a = new THREE.Vector3(positions.getX(index[i]), positions.getY(index[i]), positions.getZ(index[i]));
|
|
152
|
+
const b = new THREE.Vector3(positions.getX(index[i + 1]), positions.getY(index[i + 1]), positions.getZ(index[i + 1]));
|
|
153
|
+
const c = new THREE.Vector3(positions.getX(index[i + 2]), positions.getY(index[i + 2]), positions.getZ(index[i + 2]));
|
|
154
|
+
triangles.push([a, b, c]);
|
|
155
|
+
}
|
|
156
|
+
} else {
|
|
157
|
+
// 无索引时,每三个顶点组成一个三角形
|
|
158
|
+
for (let i = 0; i < positions.count; i += 3) {
|
|
159
|
+
const a = new THREE.Vector3(positions.getX(i), positions.getY(i), positions.getZ(i));
|
|
160
|
+
const b = new THREE.Vector3(positions.getX(i + 1), positions.getY(i + 1), positions.getZ(i + 1));
|
|
161
|
+
const c = new THREE.Vector3(positions.getX(i + 2), positions.getY(i + 2), positions.getZ(i + 2));
|
|
162
|
+
triangles.push([a, b, c]);
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
|
|
166
|
+
if (triangles.length === 0) return [];
|
|
167
|
+
|
|
168
|
+
// 计算每个三角形的面积
|
|
169
|
+
const areas = triangles.map(([a, b, c]) => {
|
|
170
|
+
const ab = new THREE.Vector3().subVectors(b, a);
|
|
171
|
+
const ac = new THREE.Vector3().subVectors(c, a);
|
|
172
|
+
return new THREE.Vector3().crossVectors(ab, ac).length() * 0.5;
|
|
173
|
+
});
|
|
174
|
+
const totalArea = areas.reduce((sum, a) => sum + a, 0);
|
|
175
|
+
|
|
176
|
+
// 按面积比例分配采样点数
|
|
177
|
+
const points = [];
|
|
178
|
+
for (let i = 0; i < triangles.length; i++) {
|
|
179
|
+
const [a, b, c] = triangles[i];
|
|
180
|
+
const area = areas[i];
|
|
181
|
+
let samplesForFace = Math.round((area / totalArea) * maxPoints);
|
|
182
|
+
if (samplesForFace < 1 && points.length < maxPoints) samplesForFace = 1; // 确保每个面至少一个点
|
|
183
|
+
|
|
184
|
+
for (let j = 0; j < samplesForFace; j++) {
|
|
185
|
+
// 重心坐标随机采样
|
|
186
|
+
const u = Math.random();
|
|
187
|
+
const v = Math.random() * (1 - u);
|
|
188
|
+
const w = 1 - u - v;
|
|
189
|
+
const point = new THREE.Vector3()
|
|
190
|
+
.addScaledVector(a, u)
|
|
191
|
+
.addScaledVector(b, v)
|
|
192
|
+
.addScaledVector(c, w);
|
|
193
|
+
points.push(point);
|
|
194
|
+
}
|
|
195
|
+
}
|
|
196
|
+
|
|
197
|
+
// 如果点数不够,随机补充
|
|
198
|
+
while (points.length < maxPoints) {
|
|
199
|
+
const triIdx = Math.floor(Math.random() * triangles.length);
|
|
200
|
+
const [a, b, c] = triangles[triIdx];
|
|
201
|
+
const u = Math.random();
|
|
202
|
+
const v = Math.random() * (1 - u);
|
|
203
|
+
const w = 1 - u - v;
|
|
204
|
+
points.push(new THREE.Vector3().addScaledVector(a, u).addScaledVector(b, v).addScaledVector(c, w));
|
|
205
|
+
}
|
|
206
|
+
return points.slice(0, maxPoints);
|
|
207
|
+
},
|
|
208
|
+
generateGenericLocalPoints(geometry, maxPoints = 1000) {
|
|
209
|
+
const pos = geometry.getAttribute('position');
|
|
210
|
+
if (!pos) return [];
|
|
211
|
+
const allVerts = [];
|
|
212
|
+
for (let i = 0; i < pos.count; i++) {
|
|
213
|
+
allVerts.push(new THREE.Vector3(pos.getX(i), pos.getY(i), pos.getZ(i)));
|
|
214
|
+
}
|
|
215
|
+
let sourceVerts = allVerts;
|
|
216
|
+
if (geometry.index) {
|
|
217
|
+
const indexArr = geometry.index.array;
|
|
218
|
+
const seen = new Set();
|
|
219
|
+
sourceVerts = [];
|
|
220
|
+
for (let i = 0; i < indexArr.length; i++) {
|
|
221
|
+
const v = allVerts[indexArr[i]];
|
|
222
|
+
const key = `${v.x.toFixed(4)},${v.y.toFixed(4)},${v.z.toFixed(4)}`;
|
|
223
|
+
if (!seen.has(key)) {
|
|
224
|
+
seen.add(key);
|
|
225
|
+
sourceVerts.push(v.clone());
|
|
226
|
+
}
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
if (sourceVerts.length > maxPoints) {
|
|
230
|
+
const step = Math.ceil(sourceVerts.length / maxPoints);
|
|
231
|
+
const sampled = [];
|
|
232
|
+
for (let i = 0; i < sourceVerts.length; i += step) sampled.push(sourceVerts[i]);
|
|
233
|
+
sourceVerts = sampled;
|
|
234
|
+
}
|
|
235
|
+
return sourceVerts;
|
|
236
|
+
|
|
237
|
+
},
|
|
238
|
+
findClosestPair(points1, points2) {
|
|
239
|
+
let minDist = Infinity;
|
|
240
|
+
const c1 = new THREE.Vector3();
|
|
241
|
+
const c2 = new THREE.Vector3();
|
|
242
|
+
for (const p1 of points1) {
|
|
243
|
+
for (const p2 of points2) {
|
|
244
|
+
const d = p1.distanceTo(p2);
|
|
245
|
+
if (d < minDist) {
|
|
246
|
+
minDist = d;
|
|
247
|
+
c1.copy(p1);
|
|
248
|
+
c2.copy(p2);
|
|
249
|
+
}
|
|
250
|
+
}
|
|
251
|
+
}
|
|
252
|
+
return { point1: c1, point2: c2, distance: minDist };
|
|
253
|
+
},
|
|
254
|
+
|
|
255
|
+
// 平行判断 (基于包围盒主轴方向)
|
|
256
|
+
checkParallelism(inst1, id1, inst2, id2) {
|
|
257
|
+
const mat1 = this.getInstanceWorldMatrix(inst1, id1);
|
|
258
|
+
const mat2 = this.getInstanceWorldMatrix(inst2, id2);
|
|
259
|
+
const box1 = new THREE.Box3();
|
|
260
|
+
const box2 = new THREE.Box3();
|
|
261
|
+
|
|
262
|
+
// 确保包围盒存在
|
|
263
|
+
if (!inst1.geometry.boundingBox) inst1.geometry.computeBoundingBox();
|
|
264
|
+
if (!inst2.geometry.boundingBox) inst2.geometry.computeBoundingBox();
|
|
265
|
+
|
|
266
|
+
box1.copy(inst1.geometry.boundingBox).applyMatrix4(mat1);
|
|
267
|
+
box2.copy(inst2.geometry.boundingBox).applyMatrix4(mat2);
|
|
268
|
+
|
|
269
|
+
const size1 = new THREE.Vector3(); box1.getSize(size1);
|
|
270
|
+
const size2 = new THREE.Vector3(); box2.getSize(size2);
|
|
271
|
+
|
|
272
|
+
const getMainDir = (s) => {
|
|
273
|
+
if (s.x >= s.y && s.x >= s.z) return new THREE.Vector3(1, 0, 0);
|
|
274
|
+
if (s.y >= s.x && s.y >= s.z) return new THREE.Vector3(0, 1, 0);
|
|
275
|
+
return new THREE.Vector3(0, 0, 1);
|
|
276
|
+
};
|
|
277
|
+
const d1 = getMainDir(size1);
|
|
278
|
+
const d2 = getMainDir(size2);
|
|
279
|
+
|
|
280
|
+
const rot1 = new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().extractRotation(mat1));
|
|
281
|
+
const rot2 = new THREE.Quaternion().setFromRotationMatrix(new THREE.Matrix4().extractRotation(mat2));
|
|
282
|
+
d1.applyQuaternion(rot1);
|
|
283
|
+
d2.applyQuaternion(rot2);
|
|
284
|
+
|
|
285
|
+
return Math.abs(d1.dot(d2)) > 0.95;
|
|
286
|
+
},
|
|
287
|
+
getInstanceWorldMatrix(instancedMesh, instanceId) {
|
|
288
|
+
const matrix = new THREE.Matrix4();
|
|
289
|
+
const instanceMatrix = new THREE.Matrix4();
|
|
290
|
+
instancedMesh.getMatrixAt(instanceId, instanceMatrix);
|
|
291
|
+
matrix.multiplyMatrices(instancedMesh.matrixWorld, instanceMatrix);
|
|
292
|
+
return matrix;
|
|
293
|
+
},
|
|
294
|
+
close(isClear) {
|
|
295
|
+
this.renderer.domElement.removeEventListener('mousedown', this.mousedown);
|
|
296
|
+
this.renderer.domElement.removeEventListener('mouseup', this.click)
|
|
297
|
+
if (!isClear) {
|
|
298
|
+
this.remove(this.points);
|
|
299
|
+
this.remove(this.polyline);
|
|
300
|
+
this.remove(this.labels);
|
|
301
|
+
this.pointArray.splice(0);
|
|
302
|
+
this.points.splice(0);
|
|
303
|
+
this.polyline.splice(0);
|
|
304
|
+
this.labels.splice(0);
|
|
305
|
+
this.firstTime = 0;
|
|
306
|
+
}
|
|
307
|
+
this.renderer.domElement.style.cursor = 'pointer';
|
|
308
|
+
},
|
|
309
|
+
clear() {
|
|
310
|
+
this.remove(this.points);
|
|
311
|
+
this.remove(this.polyline);
|
|
312
|
+
this.remove(this.labels);
|
|
313
|
+
this.pointArray.splice(0);
|
|
314
|
+
this.points.splice(0);
|
|
315
|
+
this.polyline.splice(0);
|
|
316
|
+
this.labels.splice(0);
|
|
317
|
+
this.firstTime = 0;
|
|
318
|
+
},
|
|
319
|
+
remove(array) {
|
|
320
|
+
for (let index = 0; index < array.length; index++) {
|
|
321
|
+
const element = array[index];
|
|
322
|
+
if (element.geometry) {
|
|
323
|
+
element.geometry.dispose();
|
|
324
|
+
}
|
|
325
|
+
this.scene.remove(element);
|
|
326
|
+
}
|
|
327
|
+
},
|
|
328
|
+
numberToString(num) {
|
|
329
|
+
if (num < 0.0001) {
|
|
330
|
+
return num.toString();
|
|
331
|
+
}
|
|
332
|
+
let fractionDigits = 2;
|
|
333
|
+
if (num < 0.01) {
|
|
334
|
+
fractionDigits = 4;
|
|
335
|
+
} else if (num < 0.1) {
|
|
336
|
+
fractionDigits = 3;
|
|
337
|
+
}
|
|
338
|
+
return num.toFixed(fractionDigits);
|
|
339
|
+
},
|
|
340
|
+
preventContextMenu(event) {
|
|
341
|
+
event.preventDefault();
|
|
342
|
+
},
|
|
343
|
+
};
|
|
344
|
+
export default {
|
|
345
|
+
MeasureClearDistance
|
|
346
|
+
};
|