fl-web-component 0.1.1 → 1.0.1

package/src/utils/flgltf-parser.js

@@ -0,0 +1,141 @@
+import * as THREE from 'three';
+
+function parseData(input) {
+  // 辅助函数：递归处理实例
+  function processInstance(instance, parentInstanceId, instanceMap) {
+    const newInstance = {
+      category: instance.category || instance.name,
+      drawObject: instance.drawObject || instance.mesh,
+      fatherId: parentInstanceId || '',
+      instanceId: instance.instanceId || instance._batchId,
+      matrix: instance.matrix,
+      children: [],
+    };
+
+    // 处理子实例
+    if (instance.children && instance.children.length > 0) {
+      instance.children.forEach(childId => {
+        const childInstance = instanceMap.get(childId);
+        if (childInstance) {
+          const processedChild = processInstance(childInstance, instance.instanceId, instanceMap);
+          newInstance.children.push(processedChild);
+        }
+      });
+    }
+
+    return newInstance;
+  }
+
+  function flattenAndComputeWorldMatrices(
+    nodes,
+    result = [],
+    parentWorldMatrix = null,
+    fatherId = ''
+  ) {
+    for (const node of nodes) {
+      const { category, instanceId, matrix, children, drawObject } = node;
+
+      // 构造本地矩阵
+      let localMatrix;
+      if (matrix && matrix.val) {
+        localMatrix = new THREE.Matrix4().fromArray(matrix.val);
+      } else {
+        localMatrix = new THREE.Matrix4().identity(); // 默认为单位矩阵
+      }
+
+      // 计算世界矩阵
+      const worldMatrix = parentWorldMatrix
+        ? parentWorldMatrix.clone().multiply(localMatrix)
+        : localMatrix.clone();
+
+      // 构造输出节点
+      result.push({
+        drawObject,
+        category,
+        instanceId,
+        // matrix,
+        matrix: {
+          val: Array.from(worldMatrix.toArray()),
+        },
+        fatherId,
+      });
+
+      // 递归处理子节点，传递当前世界矩阵
+      if (children) {
+        flattenAndComputeWorldMatrices(children, result, worldMatrix, instanceId);
+        //   flattenAndComputeWorldMatrices(children, result);
+      }
+    }
+
+    return result;
+  }
+
+  // 创建实例映射
+  const instanceMap = new Map();
+  input.node.forEach(instance => {
+    instanceMap.set(instance.id, instance);
+  });
+
+  // 处理根实例
+  const rootInstances = [];
+  instanceMap.forEach(instance => {
+    let isRoot = true;
+    instanceMap.forEach(otherInstance => {
+      if (otherInstance.children && otherInstance.children.includes(instance.id)) {
+        isRoot = false;
+      }
+    });
+    if (isRoot) {
+      const processed = processInstance(instance, null, instanceMap);
+      rootInstances.push(processed);
+    }
+  });
+
+  // const formateArray = (str) => str?.split(",").map(Number)
+  // 处理drawObjs
+  const drawObjMap = new Map();
+  input.mesh.forEach(meshItem => {
+    const geomList = [];
+    meshItem.primitives.forEach(primitive => {
+      const primitiveData = input.primitive.find(g => g.id === primitive.prmid);
+      if (primitiveData) {
+        const material = input.material?.find(m => m.id === primitiveData.material);
+        const prop = {
+          color: material?.color || [255, 255, 255, 255],
+          fontsize: material?.fontsize !== undefined ? material?.fontsize : 20,
+          frontname: material?.frontname !== undefined ? material?.frontname : '',
+          italic: material?.italic,
+          linepacing: 1, // 默认值
+          linewidth: material?.linewidth !== undefined ? material?.linewidth : 1, // 默认值
+        };
+
+        geomList.push({
+          geomId: primitiveData.id,
+          type: primitiveData.geomType,
+          text: primitiveData.geomText,
+          points: primitiveData.position,
+          normals: primitiveData.normal,
+          triangles: primitiveData.indices,
+          max: primitiveData.max,
+          min: primitiveData.min,
+          prop: prop,
+        });
+      }
+    });
+
+    drawObjMap.set(meshItem.id, {
+      drawObjId: meshItem.id,
+      geoms: geomList,
+    });
+  });
+
+  const formatInstances = [];
+  flattenAndComputeWorldMatrices(rootInstances, formatInstances);
+
+  return {
+    drawObjs: Array.from(drawObjMap.values()),
+    instances: formatInstances,
+  };
+}
+
+export { parseData };

package/src/utils/instance-parser.js

@@ -0,0 +1,402 @@
+import * as THREE from 'three';
+import { FontLoader } from 'three/examples/jsm/loaders/FontLoader';
+import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry.js';
+import helvetikerFont from 'three/examples/fonts/helvetiker_regular.typeface.json';
+import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
+
+const GEOM_TYPES = {
+  geom_3d: 53248,
+  geom_3d_text: 53249,
+  geom_3d_mtext: 53250,
+  geom_3d_obj: 53251,
+  geom_2d: 57344,
+  geom_2d_text: 57345,
+  geom_2d_mtext: 57346,
+  geom_2d_circle: 57347,
+  geom_2d_arc: 57348,
+  geom_2d_ellipse: 57349,
+  geom_2d_ellipseArc: 57350,
+  geom_2d_others: 57351,
+};
+
+let drawObjMapInstance = {};
+/**
+ * 处理 InstancedMesh 类型模型的核心方法
+ * @param {Object} instance - 实例对象，包含绘制对象ID和实例ID等数据
+ * @param {Array} drawObjs - 绘制对象数组，包含几何数据
+ */
+function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor) {
+  // 第一阶段：构建实例映射表
+  let modelGroup = new THREE.Group();
+  for (let i = 0; i < instances.length; i++) {
+    formatInstancedMap(instances[i], drawObjs);
+  }
+
+  // 第二阶段：遍历所有实例进行处理
+  for (let i = 0; i < instances.length; i++) {
+    let targetGroup, instancedMeshIndex, drawObjectName;
+    // for (let drawObjectId in drawObjMapInstance) {
+    //   const drawObj = drawObjMapInstance[drawObjectId];
+    //   drawObj.MapInstance.forEach((instance, index) => {
+    //     if (instance.instanceId == instances[i].instanceId) {
+    //       instancedMeshIndex = index;
+    //       drawObjectName = drawObjectId;
+    //     }
+    //   });
+    // }
+
+    const drawObjInstance = drawObjMapInstance[instances[i].drawObject];
+    drawObjInstance.MapInstance.forEach((instance, index) => {
+      if (instance.instanceId == instances[i].instanceId) {
+        instancedMeshIndex = index;
+        drawObjectName = instances[i].drawObject;
+      }
+    });
+    if (drawObjectName) {
+      targetGroup = scene.getObjectByName(drawObjectName);
+    }
+
+    if (!targetGroup) {
+      const drawObj = drawObjMapInstance[instances[i].drawObject];
+      const group = new THREE.Group();
+      group.name = instances[i].drawObject;
+      group.userData.isInstancedMeshGroup = true;
+
+      const instanceCount = drawObj.MapInstance.length;
+      drawObj.MapMesh?.forEach(mesh => {
+        const model = drawModel(mesh, group.name, instanceCount, customColor);
+        if (!model) {
+          return;
+        }
+        drawObj.MapInstance.forEach((instance, index) => {
+          if (instance.instanceId == instances[i].instanceId) {
+            model.userData.instanceIndex = index;
+            model.name = instances[i].instanceId;
+            const matrixVal = instance.matrix?.val;
+            if (matrixVal) {
+              const m4 = new THREE.Matrix4();
+              // m4.setPosition(new THREE.Vector3(9999999, 9999999, 9999999)); // TODO 临时隐藏方案
+              m4.elements = instance.matrix.val;
+              model.setMatrixAt(index, m4);
+            }
+            // 需要先设置全部实例颜色，否则后续设置颜色无效
+            const { color } = mesh.prop;
+            const meshColor = customColor
+              ? new THREE.Color(customColor)
+              : new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`);
+            model.setColorAt(index, meshColor);
+          }
+        });
+        // model.instanceColor.needsUpdate = true;
+        group.add(model);
+      });
+      modelGroup.add(group);
+    }
+  }
+  return modelGroup;
+  // timeRender();
+  // console.log('scene', scene)
+}
+
+/**
+ * 构建实例模型映射表
+ * @param {Object} instance - 实例对象，包含绘制对象ID和实例ID等数据
+ * @param {Array} drawObjs - 绘制对象数组，包含几何数据
+ */
+function formatInstancedMap(instance, drawObjs) {
+  const { drawObject } = instance; // 提取绘制对象ID
+
+  // 检查是否已存在该绘制对象的映射条目
+  if (drawObjMapInstance[drawObject]) {
+    // 查找是否已存在相同实例ID的记录
+    const hasInstance = drawObjMapInstance[drawObject]['MapInstance'].find(item => {
+      return item.instanceId == instance.instanceId;
+    });
+
+    // 不存在则添加新实例
+    if (!hasInstance) {
+      drawObjMapInstance[drawObject]['MapInstance'].push(instance);
+    }
+  } else {
+    // 新建绘制对象条目
+    drawObjMapInstance[drawObject] = {
+      MapInstance: [instance], // 存储实例数组
+    };
+
+    // 关联绘制对象的几何数据
+    drawObjs.forEach(item => {
+      if (item.drawObjId == drawObject) {
+        // 将几何数据映射到对应的绘制对象
+        drawObjMapInstance[drawObject].MapMesh = item.geoms;
+      }
+    });
+  }
+}
+
+/**
+ * 将数组数据转换为键值对形式的 JSON 对象
+ * @param {Array} data - 包含对象的数组，每个对象都有一个 drawObjId 属性
+ * @returns {Object}
+ */
+function formatDrawObjs(data) {
+  const obj = {};
+  data.forEach(item => {
+    obj[item.drawObjId] = item;
+  });
+  return obj;
+}
+/**
+ * 根据几何体类型绘制对应的3D模型
+ * @param {Object} geom - 几何数据对象，包含类型、属性等绘制信息
+ * @param {String} instanceName - 实例名称，用于标识模型实例
+ * @param {Number} instanceCount - 实例化渲染的数量（用于InstancedMesh）
+ * @returns {THREE.Object3D} 返回创建的3D模型对象
+ */
+function drawModel(geom, instanceName, instanceCount, nColor) {
+  let model;
+  // 处理二维几何体（普通2D图形和特殊2D图形）
+  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
+  ) {
+    model = drawText(geom, instanceName, instanceCount);
+    // 处理各种曲线类型（圆形、圆弧、椭圆、椭圆弧）
+  } else if (
+    geom.type == GEOM_TYPES.geom_2d_circle ||
+    geom.type == GEOM_TYPES.geom_2d_arc ||
+    geom.type == GEOM_TYPES.geom_2d_ellipse ||
+    geom.type == GEOM_TYPES.geom_2d_ellipseArc
+  ) {
+    // model = drawCurves(geom, instanceName, instanceCount);// TODO 该类型调试中
+    // 处理三维几何体（普通3D模型和OBJ模型）
+  } else if (geom.type == GEOM_TYPES.geom_3d || geom.type == GEOM_TYPES.geom_3d_obj) {
+    model = draw3Dmodel(geom, instanceName, instanceCount, nColor);
+  }
+  return model;
+}
+
+/**
+ * 绘制曲线
+ *
+ * @param {Object} geom- 包含曲线信息的几何体对象
+ * @param {String} instanceName- 曲线实例的名称
+ * @return {Object}- 包含曲线模型和曲线信息的对象
+ */
+function drawCurves(geom, instanceName, instanceCount) {
+  let { points, normals } = geom;
+  let aX = points[0];
+  let aY = points[1];
+  let aZ = points[2];
+  let xrad = points[3];
+  let yrad = points[4];
+  let startAngle = points[5] ? (points[5] * Math.PI) / 180 : 0;
+  let endAngle = points[6] ? (points[6] * Math.PI) / 180 : 0;
+
+  let curve = new THREE.EllipseCurve(
+    0,
+    0,
+    xrad,
+    yrad,
+    startAngle,
+    endAngle,
+    false // 曲线方向为逆时针
+  );
+  let curvePoints = curve.getPoints(50);
+  let list = [];
+  for (let i = 0; i < curvePoints.length; i++) {
+    const { x, y } = curvePoints[i];
+    list.push(x);
+    list.push(parseFloat(y));
+
+    // // 根据角度计算动态 Z 值（例如正弦波动）
+    // const angle = Math.atan2(y, x); // 当前点的极角
+    // const z = Math.sin(angle * 2) * 2; // Z轴动态变化
+    // list.push(z); // 将原始的 z 坐标添加到列表中
+    list.push(parseFloat(0)); // 将原始的 z 坐标添加到列表中
+  }
+
+  const model = draw2Dmodel(
+    {
+      ...geom,
+      points: list,
+      normals,
+    },
+    instanceName,
+    instanceCount
+  );
+  // model.rotation.x = -Math.PI / 2;
+  // model.position.set(aX, aY, aZ);
+  const matrix = new THREE.Matrix4();
+  matrix.identity().makeTranslation(aX, aY, aZ);
+  model.applyMatrix4(matrix);
+
+  model.userData.instanceName = instanceName;
+  return model;
+}
+/**
+ * 创建三维模型实例化网格
+ * @param {Object} geom - 几何数据对象，包含顶点、法线、材质等信息
+ * @param {String} instanceName - 实例唯一标识名称
+ * @param {Number} instanceCount - 需要创建的实例数量
+ * @returns {THREE.InstancedMesh} - 返回创建的三维实例化网格对象
+ */
+function draw3Dmodel(geom, instanceName, instanceCount, nColor) {
+  // 解构几何数据中的自定义几何体和材质
+  const { geometry: customGeometry, material: customMaterial, triangles, points, normals } = geom;
+  // 使用自定义几何体或创建新的缓冲几何体
+  const geometry = customGeometry || new THREE.BufferGeometry();
+
+  // 设置三角形索引数据
+  if (triangles && triangles.length) {
+    geometry.setIndex(triangles);
+  }
+
+  // 设置顶点位置数据
+  if (points && points.length) {
+    const position = new Float32Array(points);
+    geometry.setAttribute('position', new THREE.BufferAttribute(position, 3));
+  }
+
+  // 设置顶点法线数据
+  if (normals && normals.length) {
+    const normal = new Float32Array(normals);
+    geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
+  }
+  const { color } = geom.prop;
+  let material, mesh, colors;
+  if (Array.isArray(color) && color.length) {
+    colors = color;
+  } else if (color) {
+    colors = color.split(',');
+  } else {
+    colors = [255, 255, 255, 255];
+  }
+
+  // 使用自定义材质或创建标准材质（默认参数配置）
+  material =
+    customMaterial ||
+    new THREE.MeshStandardMaterial({
+      roughness: 0.8,
+      envMapIntensity: 0.5, // 调低环境贴图的强度
+      side: THREE.DoubleSide,
+      userData: {
+        nColor: nColor ? new THREE.Color(nColor) : new THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
+      },
+    });
+
+  mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
+  mesh.userData.drawObjectId = instanceName;
+
+  return mesh;
+}
+
+/**
+ * 绘制 2D 模型的方法
+ *
+ * @param {Object} geom - 包含几何体信息的对象
+ * @param {String} instanceName - 模型实例的名称
+ * @returns {Object} - 包含所有 2D 模型的组对象
+ */
+function draw2Dmodel(geom, instanceName, instanceCount) {
+  const points = geom.points;
+  const normals = geom.normals;
+  const geometry = new THREE.BufferGeometry();
+
+  if (points && points.length) {
+    const position = new Float32Array(points);
+    geometry.setAttribute('position', new THREE.BufferAttribute(position, 3));
+  }
+
+  if (normals && normals.length) {
+    const normal = new Float32Array(normals);
+    geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
+  }
+
+  const { color, linewidth } = geom.prop;
+  const formatLinewidth = (linewidth < 1 ? linewidth * 50 : linewidth) || 5;
+  const material = new MeshLineMaterial({
+    color: new THREE.Color(`rgb(${color[0]}, ${color[1]}, ${color[2]})`),
+    lineWidth: formatLinewidth,
+  });
+
+  const lineGeometry = new MeshLineGeometry();
+  lineGeometry.setPoints(geometry);
+
+  const model = draw3Dmodel(
+    {
+      prop: geom.prop,
+      geometry: lineGeometry,
+      material,
+    },
+    instanceName,
+    instanceCount
+  );
+  // mesh.raycast = raycast;
+
+  model.userData.instanceName = instanceName;
+  // group.add(line);
+
+  return model;
+}
+
+// drawText 方法，用于渲染 2D 或 3D 文字
+function drawText(geom, instanceName, instanceCount) {
+  const { prop, text, points, normals } = geom;
+  const { color, linewidth, fontsize, fontname, rotate, italic, widthscale } = prop;
+
+  var loader = new FontLoader();
+  var font = loader.parse(helvetikerFont);
+  var options = {
+    font: font, // 字体格式
+    size: fontsize || 20, // 字体大小 TODO
+    height: 1, // 字体深度
+    curveSegments: 11, // 曲线控制点数
+    bevelEnabled: true, // 斜角
+    bevelThickness: 0.1, // 斜角的深度
+    bevelSize: 1, // 斜角的大小
+    depth: 1,
+    bevelSegments: 1, // 斜角段数
+  };
+
+  var geometry = new TextGeometry(`${text}`, options);
+
+  const mesh = draw3Dmodel(
+    {
+      prop,
+      geometry,
+      normals,
+    },
+    instanceName,
+    instanceCount
+  );
+
+  // 创建平移矩阵并应用
+
+  const matrix = new THREE.Matrix4();
+  matrix.identity().makeTranslation(points[0], points[1], points[2]);
+  mesh.applyMatrix4(matrix);
+
+  // if (stageId == STAGE_MODEL_TYPE.PID) {
+  //   mesh.translateX(-(fontsize / 2));
+  //   mesh.translateY(-(fontsize / 2));
+  // }
+
+  // points && mesh.position.set(points[0], points[1], points[2]);
+  // if (rotate) {
+  //   mesh.rotateY(rotate);
+  // }
+  // mesh.rotateX(-Math.PI / 2);
+  mesh.translateX(-(fontsize / 2.5));
+  mesh.translateY(-(fontsize / 2.5));
+
+  mesh.userData.instanceName = instanceName;
+
+  return mesh;
+}
+
+export { handleInstancedMeshModel };