fl-web-component 1.4.3 → 1.4.5
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 +4 -0
- package/dist/fl-web-component.common.js +111 -84
- 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-flcanvas/index.vue +17 -0
- package/packages/components/com-graphics/index.vue +1 -1
- package/src/utils/instance-parser.js +33 -14
|
@@ -1 +1 @@
|
|
|
1
|
-
@charset "UTF-8";#fl-model[data-v-
|
|
1
|
+
@charset "UTF-8";#fl-model[data-v-47e72495]{width:100%;height:100%;cursor:pointer}[data-v-47e72495] .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-47e72495] .measure-label{max-width:100px;margin-top:-1em;border:10px;border-radius:5px;padding:3px 10px;cursor:pointer;color:#009bea;background-color:#f4f4f4;box-shadow:0 1px 3px 1px rgba(0,0,0,.25)}[data-v-47e72495] .circle-tag{width:10px;height:10px;margin-top:5px;border-radius:50%;background-color:#ff5000}[data-v-47e72495] .measure-label-font{word-break:break-all}[data-v-47e72495] .mark-label-img{padding-top:5px;width:20px;height:20px}.lil-gui{background:hsla(0,0%,100%,.95)!important;border:1px solid #e0e0e0!important;border-radius:8px!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-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-gui .controller{border-bottom:1px solid #f1f3f4!important;background:transparent!important}.lil-gui .controller:last-child{border-bottom:none!important}.lil-gui .controller .name{color:#495057!important;font-weight:500!important;font-size:12px!important}.lil-gui .controller .widget{background:#f8f9fa!important;border:1px solid #ced4da!important;border-radius:4px!important;color:#495057!important}.lil-gui .controller .widget:focus,.lil-gui .controller .widget:hover{border-color:#80bdff!important;box-shadow:0 0 0 2px rgba(0,123,255,.25)!important}.lil-gui .controller .widget:focus{outline:none!important}.lil-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-gui .controller.number .fill{border-right:solid #008de9}.lil-gui .controller input[type=range]::-webkit-slider-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;-webkit-appearance:none!important;appearance:none!important;cursor:pointer!important}.lil-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-gui .controller .option{background:#fff!important;color:#495057!important;border-bottom:1px solid #f1f3f4!important}.lil-gui .controller .option:hover{background:#f8f9fa!important}.lil-gui .controller .option:last-child{border-bottom:none!important}.lil-gui input:active{background:#e6eff4}.lil-gui .controller button{background:linear-gradient(135deg,#007bff,#0056b3)!important;color:#fff!important;border:none!important;border-radius:4px!important;font-weight:500!important;transition:all .2s ease!important}.lil-gui .controller button:hover{background:linear-gradient(135deg,#0056b3,#004085)!important;transform:translateY(-1px)!important;box-shadow:0 4px 8px rgba(0,123,255,.3)!important}.lil-gui .controller .color{border:2px solid #fff!important;border-radius:4px!important;box-shadow:0 2px 4px rgba(0,0,0,.1)!important}.lil-gui .controller.number .slider,.lil-gui .controller.number .slider:hover{background-color:#e6eff4}.lil-gui input,.lil-gui input:hover,.lil-gui input[type=number]:focus,.lil-gui input[type=text]:focus{background:#e6eff4}.lil-gui .controller>.name{min-width:25px}.lil-gui .controller.number input{color:#2e3136}.lil-gui .controller.number .slider:active{background-color:#e6eff4}.lil-gui .folder>.title{background:linear-gradient(135deg,#f1f3f4,#e9ecef)!important;color:#495057!important;border-bottom:1px solid #dee2e6!important}.lil-gui .folder>.title:before{color:#6c757d!important}.lil-gui .folder.closed>.children{display:none!important}#konva-container[data-v-459d4d3b]{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:flex;flex-direction:column;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:flex;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:""}#svg-tigger[data-v-0ec35ee4]{cursor:pointer;height:100%;width:100%}
|
package/package.json
CHANGED
|
@@ -134,7 +134,24 @@
|
|
|
134
134
|
konvaStage.setX(x);
|
|
135
135
|
konvaStage.setY(y); // 750
|
|
136
136
|
|
|
137
|
+
//算一下舞台中点
|
|
138
|
+
let width=konvaStage.width();
|
|
139
|
+
let height=konvaStage.height()
|
|
140
|
+
let x1=width/2;
|
|
141
|
+
let y1=height/2;
|
|
137
142
|
|
|
143
|
+
//算包围盒宽高
|
|
144
|
+
|
|
145
|
+
let boundsWidth=this.bounds.maxX-this.bounds.minX;
|
|
146
|
+
let boundsHeight=Math.abs(Math.abs(this.bounds.maxY)-Math.abs(this.bounds.minY));
|
|
147
|
+
|
|
148
|
+
let x2=x+x1-(boundsWidth/2);
|
|
149
|
+
let y2=y+y1-(boundsHeight/2)
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
konvaStage.setX(x2);
|
|
154
|
+
konvaStage.setY(y2); // 750
|
|
138
155
|
});
|
|
139
156
|
});
|
|
140
157
|
|
|
@@ -1632,7 +1632,7 @@
|
|
|
1632
1632
|
box3.getSize(size);
|
|
1633
1633
|
const maxBorder = Math.max(size.x, size.y, size.z);
|
|
1634
1634
|
|
|
1635
|
-
cameraControls.camera.far = maxBorder * 50; // 设置相机的远裁剪面
|
|
1635
|
+
// cameraControls.camera.far = maxBorder * 50; // 设置相机的远裁剪面
|
|
1636
1636
|
|
|
1637
1637
|
cameraControls.minDistance = maxBorder * 0.05; // 动态设置视角滚轮的距离
|
|
1638
1638
|
|
|
@@ -131,8 +131,8 @@ function handleInstancedMeshModel(
|
|
|
131
131
|
geomMatrix.elements = mesh.matrix.val;
|
|
132
132
|
|
|
133
133
|
// 处理文本居中对齐
|
|
134
|
-
const { points, alignType } = mesh;
|
|
135
134
|
if (isTextType(mesh.type)) {
|
|
135
|
+
const { points, alignType } = mesh;
|
|
136
136
|
const positionMatrix = new THREE.Matrix4();
|
|
137
137
|
|
|
138
138
|
const alignMatrix = createAlignedText(alignType, model.geometry);
|
|
@@ -140,6 +140,7 @@ function handleInstancedMeshModel(
|
|
|
140
140
|
positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
|
|
141
141
|
geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
|
|
142
142
|
}
|
|
143
|
+
|
|
143
144
|
m4.multiplyMatrices(meshMatrix, geomMatrix);
|
|
144
145
|
|
|
145
146
|
model.setMatrixAt(index, m4);
|
|
@@ -341,22 +342,25 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
|
|
|
341
342
|
// 使用自定义几何体或创建新的缓冲几何体
|
|
342
343
|
const geometry = customGeometry || new THREE.BufferGeometry();
|
|
343
344
|
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
345
|
+
if(!customGeometry){
|
|
346
|
+
// 设置三角形索引数据
|
|
347
|
+
if (triangles && triangles.length) {
|
|
348
|
+
geometry.setIndex(triangles);
|
|
349
|
+
}
|
|
348
350
|
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
351
|
+
// 设置顶点位置数据
|
|
352
|
+
if (points && points.length) {
|
|
353
|
+
const position = new Float32Array(points);
|
|
354
|
+
geometry.setAttribute('position', new THREE.BufferAttribute(position, 3));
|
|
355
|
+
}
|
|
354
356
|
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
358
|
-
|
|
357
|
+
// 设置顶点法线数据
|
|
358
|
+
if (normals && normals.length) {
|
|
359
|
+
const normal = new Float32Array(normals);
|
|
360
|
+
geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
|
|
361
|
+
}
|
|
359
362
|
}
|
|
363
|
+
|
|
360
364
|
const { color, transparent } = prop;
|
|
361
365
|
let material, mesh, colors, opacity;
|
|
362
366
|
if (Array.isArray(color) && color.length) {
|
|
@@ -439,6 +443,21 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
|
|
|
439
443
|
);
|
|
440
444
|
};
|
|
441
445
|
}
|
|
446
|
+
// 针对 MeshLineMaterial 开启实例化支持
|
|
447
|
+
if (material.type === 'MeshLineMaterial') {
|
|
448
|
+
material.defines = material.defines || {};
|
|
449
|
+
material.defines.USE_INSTANCING = '';
|
|
450
|
+
|
|
451
|
+
if (!material.userData.meshlineInstancingPatched) {
|
|
452
|
+
material.vertexShader = material.vertexShader.replace(
|
|
453
|
+
'mat4 m = projectionMatrix * modelViewMatrix;',
|
|
454
|
+
'mat4 m = projectionMatrix * modelViewMatrix * instanceMatrix;'
|
|
455
|
+
);
|
|
456
|
+
material.userData.meshlineInstancingPatched = true;
|
|
457
|
+
material.needsUpdate = true;
|
|
458
|
+
}
|
|
459
|
+
}
|
|
460
|
+
|
|
442
461
|
mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
|
|
443
462
|
|
|
444
463
|
const { visible } = prop;
|