fl-web-component 1.2.8 → 1.2.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "1.2.8",
+  "version": "1.2.10",
   "scripts": {
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",
     "dev": "vue-cli-service serve",

package/src/utils/flgltf-parser.js

@@ -111,9 +111,11 @@ function parseData(input) {
           linewidth: material?.linewidth !== undefined ? material?.linewidth : 1, // 默认值
         };
 
+        const identity = new THREE.Matrix4().identity();
+
         geomList.push({
           matrix: {
-            val: primitive.matrix,
+            val: primitive.matrix?.length ? primitive.matrix : identity.elements,
           },
           prmid: primitive.prmid,
           geomId: primitiveData.id,
@@ -121,7 +123,7 @@ function parseData(input) {
           text: primitiveData.geomText,
           points: primitiveData.position,
           normals: primitiveData.normal,
-          triangles: primitiveData.indices,
+          triangles: primitiveData.indices || [],
           max: primitiveData.max,
           min: primitiveData.min,
           prop: prop,

package/src/utils/instance-parser.js

@@ -99,7 +99,17 @@ function handleInstancedMeshModel(
                 // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
                 meshMatrix.elements = item.matrix.val;
                 geomMatrix.elements = mesh.matrix.val;
+                
+                const { points } = mesh;
+                if(isTextType(mesh.type)){
+                  const positionMatrix = new THREE.Matrix4();
+                  const alignMatrix = new THREE.Matrix4();
+                  positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
+                  alignMatrix.identity().makeTranslation(-(mesh.prop.fontsize / 2.5), -(mesh.prop.fontsize / 2.5), 0);
+                  geomMatrix.multiply(positionMatrix).multiply(alignMatrix);
+                }
                 m4.multiplyMatrices(meshMatrix, geomMatrix);
+
                 model.setMatrixAt(index, m4);
                 const copyMatrix = new THREE.Matrix4().copy(m4);
                 model.userData.copyMatrix = copyMatrix;
@@ -186,12 +196,7 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
   if (geom.type == GEOM_TYPES.geom_2d || geom.type == GEOM_TYPES.geom_2d_others) {
     model = draw2Dmodel(geom, instanceName, instanceCount); // TODO 该类型调试中
     // 处理二维文本类型
-  } else if (
-    geom.type == GEOM_TYPES.geom_2d_text ||
-    geom.type == GEOM_TYPES.geom_2d_mtext ||
-    geom.type == GEOM_TYPES.geom_3d_text ||
-    geom.type == GEOM_TYPES.geom_3d_mtext
-  ) {
+  } else if (isTextType(geom.type)) {
     model = drawText(geom, instanceName, instanceCount);
     // 处理各种曲线类型（圆形、圆弧、椭圆、椭圆弧）
   } else if (
@@ -208,6 +213,19 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
   return model;
 }
 
+/**
+ * 判断几何类型是否为文本类型
+ * @param {number} type - 几何类型枚举值，参考GEOM_TYPES中的定义
+ * @returns {boolean} 是否为文本类型（2D/3D 单行或多行文本）
+ */
+function isTextType(type){
+    return type == GEOM_TYPES.geom_2d_text ||
+    type == GEOM_TYPES.geom_2d_mtext ||
+    type == GEOM_TYPES.geom_3d_text ||
+    type == GEOM_TYPES.geom_3d_mtext
+}
+
+
 /**
  * 绘制曲线
  *
@@ -275,7 +293,7 @@ function drawCurves(geom, instanceName, instanceCount) {
  */
 function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   // 解构几何数据中的自定义几何体和材质
-  const { geometry: customGeometry, material: customMaterial, triangles, points, normals } = geom;
+  const { geometry: customGeometry, material: customMaterial, triangles, points, normals, prop } = geom;
   // 使用自定义几何体或创建新的缓冲几何体
   const geometry = customGeometry || new THREE.BufferGeometry();
 
@@ -295,7 +313,7 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
     const normal = new Float32Array(normals);
     geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
   }
-  const { color } = geom.prop;
+  const { color } = prop;
   let material, mesh, colors, opacity;
   if (Array.isArray(color) && color.length) {
     colors = color;
@@ -460,10 +478,10 @@ function drawText(geom, instanceName, instanceCount) {
   );
 
   // 创建平移矩阵并应用
-
-  const matrix = new THREE.Matrix4();
-  matrix.identity().makeTranslation(points[0], points[1], points[2]);
-  mesh.applyMatrix4(matrix);
+  // const matrix = new THREE.Matrix4();
+  // matrix.identity().makeTranslation(points[0], points[1], points[2]);
+  // mesh.applyMatrix4(matrix);
+  // points && mesh.position.set(points[0], points[1], points[2]);
 
   // if (stageId == STAGE_MODEL_TYPE.PID) {
   //   mesh.translateX(-(fontsize / 2));
@@ -475,8 +493,8 @@ function drawText(geom, instanceName, instanceCount) {
   //   mesh.rotateY(rotate);
   // }
   // mesh.rotateX(-Math.PI / 2);
-  mesh.translateX(-(fontsize / 2.5));
-  mesh.translateY(-(fontsize / 2.5));
+  // mesh.translateX(-(fontsize / 2.5));
+  // mesh.translateY(-(fontsize / 2.5));
 
   mesh.userData.instanceName = instanceName;
   return mesh;