fl-web-component 2.0.18 → 2.0.19-beta.0

package/packages/utils/StreamLoaderParser.worker.js

@@ -88,8 +88,11 @@ function createStreamState(prefixIdKey) {
   return {
     prefixIdKey: prefixIdKey || '',
     buffer: new Uint8Array(),
-    pendingPrimitives: new Map(),
-    expectingPrimitive: true,
+    pendingMesh: null,
+    pendingPrimitiveIds: new Set(),
+    pendingPrimitiveGroups: [],
+    pendingMatchedPrimitiveIds: new Set(),
+    expectingMesh: true,
     isFullProps: true,
   };
 }
@@ -105,101 +108,179 @@ function parseStreamChunk(state, chunkView, flushing = false) {
   const meshes = [];
   const primitives = [];
 
-  while (state.buffer.length > 0) {
-    if (state.expectingPrimitive) {
-      if (state.buffer.length < 12) break;
+  const commitPendingMesh = () => {
+    if (!state.pendingMesh) return;
 
-      try {
-        const dataView = new DataView(
-          state.buffer.buffer,
-          state.buffer.byteOffset,
-          state.buffer.byteLength
-        );
-        const primitiveResult = parsePrimitive(dataView, state.buffer, 0, state.isFullProps);
-        const primitiveData = primitiveResult.primitive;
-
-        _applyPrefixId(primitiveData, 'id', null, state.prefixIdKey);
-        _applyPrefixId(primitiveData, 'material', null, state.prefixIdKey);
-
-        if (state.isFullProps) {
-          const { position, normal, posindex, nolindex, indices } =
-            parsePrimitiveData(primitiveData);
-          const formatted = formatPrimitiveData({ position, normal, posindex, nolindex });
-          delete primitiveData.nolindex;
-          delete primitiveData.posindex;
-          primitiveData.position = formatted.position;
-          primitiveData.normal = formatted.normal;
-          primitiveData.indices = indices;
-        }
+    const meshList = Array.isArray(state.pendingMesh) ? state.pendingMesh : [state.pendingMesh];
+    meshList.forEach(mesh => {
+      meshes.push(mesh);
+      primitives.push(state.pendingPrimitiveGroups);
+    });
 
-        state.pendingPrimitives.set(primitiveData.id, primitiveData);
-        state.expectingPrimitive = false;
-        state.buffer = state.buffer.slice(primitiveResult.offset);
-      } catch (e) {
+    state.pendingMesh = null;
+    state.pendingPrimitiveIds = new Set();
+    state.pendingPrimitiveGroups = [];
+    state.pendingMatchedPrimitiveIds = new Set();
+  };
+
+  while (state.buffer.length > 0) {
+    if (state.expectingMesh) {
+      const meshResult = tryParseMeshFromState(state);
+      if (meshResult.status === 'incomplete') break;
+      if (meshResult.status === 'invalid') {
         break;
       }
-    } else {
-      if (state.buffer.length < 4) break;
 
-      const length = new DataView(state.buffer.buffer, state.buffer.byteOffset).getUint32(0, false);
-      if (length > 10 * 1024 * 1024) {
-        state.expectingPrimitive = true;
+      commitPendingMesh();
+      state.pendingMesh = meshResult.mesh;
+      state.pendingPrimitiveIds = new Set(collectMeshPrimitiveIds(meshResult.mesh));
+      state.pendingPrimitiveGroups = [];
+      state.pendingMatchedPrimitiveIds = new Set();
+      state.expectingMesh = false;
+      state.buffer = state.buffer.slice(meshResult.totalLen);
+    } else {
+      const nextMeshResult = tryParseMeshFromState(state);
+      if (nextMeshResult.status === 'success') {
+        commitPendingMesh();
+        state.pendingMesh = nextMeshResult.mesh;
+        state.pendingPrimitiveIds = new Set(collectMeshPrimitiveIds(nextMeshResult.mesh));
+        state.pendingPrimitiveGroups = [];
+        state.pendingMatchedPrimitiveIds = new Set();
+        state.expectingMesh = false;
+        state.buffer = state.buffer.slice(nextMeshResult.totalLen);
         continue;
       }
 
-      const totalLen = 4 + length;
-      if (state.buffer.length < totalLen) break;
-
-      const data = state.buffer.slice(4, totalLen);
-      let mesh = null;
+      if (state.buffer.length < 12) break;
 
+      let primitiveResult = null;
       try {
-        const jsonStr = utf8Decoder.decode(data);
-        mesh = JSON.parse(jsonStr);
+        primitiveResult = parsePrimitiveFromState(state);
       } catch (e) {
-        state.expectingPrimitive = true;
-        continue;
+        break;
       }
 
-      if (mesh) {
-        state.isFullProps = true;
+      const primitiveData = primitiveResult.primitive;
 
-        _applyPrefixId(mesh, 'id', null, state.prefixIdKey);
-        if (Array.isArray(mesh)) {
-          mesh.forEach(item => {
-            _applyPrefixId(item.primitives, 'prmid', item.documentId, state.prefixIdKey);
-          });
-        } else {
-          _applyPrefixId(mesh.primitives, 'prmid', mesh.documentId, state.prefixIdKey);
-        }
+      if (state.pendingPrimitiveIds.has(primitiveData.id)) {
+        state.pendingPrimitiveGroups.push(primitiveData);
+        state.pendingMatchedPrimitiveIds.add(primitiveData.id);
+      }
 
-        const docId = mesh.id;
-        const meshToPrimId = mesh.primitives.map(item => item.prmid);
-        const hasPendingPrimitive = meshToPrimId.some(item => state.pendingPrimitives.has(item));
-        const hasPendingMesh = state.pendingPrimitives.has(docId);
-
-        if (hasPendingMesh || hasPendingPrimitive) {
-          let primitiveData = state.pendingPrimitives.get(docId);
-          if (!hasPendingMesh && hasPendingPrimitive) {
-            primitiveData = state.pendingPrimitives.get(meshToPrimId[0]);
-          }
-          meshes.push(mesh);
-          primitives.push(primitiveData);
-        }
+      state.buffer = state.buffer.slice(primitiveResult.consumedBytes);
 
-        state.expectingPrimitive = false;
-        state.buffer = state.buffer.slice(totalLen);
+      if (
+        state.pendingPrimitiveIds.size > 0 &&
+        state.pendingMatchedPrimitiveIds.size >= state.pendingPrimitiveIds.size
+      ) {
+        commitPendingMesh();
+        state.expectingMesh = true;
       }
     }
   }
 
   if (flushing) {
+    commitPendingMesh();
     state.buffer = new Uint8Array();
   }
 
   return { meshes, primitives };
 }
 
+function normalizeStreamMesh(mesh, prefixIdKey) {
+  _applyPrefixId(mesh, 'id', null, prefixIdKey);
+  const meshList = Array.isArray(mesh) ? mesh : [mesh];
+
+  meshList.forEach(item => {
+    if (!item) return;
+    if (!Array.isArray(item.primitives)) {
+      item.primitives = [];
+    }
+    _applyPrefixId(item.primitives, 'prmid', item.documentId, prefixIdKey);
+  });
+
+  return mesh;
+}
+
+function collectMeshPrimitiveIds(mesh) {
+  const ids = [];
+  const meshList = Array.isArray(mesh) ? mesh : [mesh];
+
+  meshList.forEach(item => {
+    if (!item || !Array.isArray(item.primitives)) return;
+    item.primitives.forEach(primitive => {
+      if (primitive && primitive.prmid != null) {
+        ids.push(primitive.prmid);
+      }
+    });
+  });
+
+  return ids;
+}
+
+function isValidStreamMesh(mesh) {
+  const meshList = Array.isArray(mesh) ? mesh : [mesh];
+  if (meshList.length === 0) return false;
+  return meshList.every(item => item && typeof item === 'object' && Array.isArray(item.primitives));
+}
+
+function tryParseMeshFromState(state) {
+  if (state.buffer.length < 4) {
+    return { status: 'incomplete' };
+  }
+
+  const length = new DataView(state.buffer.buffer, state.buffer.byteOffset).getUint32(0, false);
+  if (length <= 0 || length > 10 * 1024 * 1024) {
+    return { status: 'invalid' };
+  }
+
+  const totalLen = 4 + length;
+  if (state.buffer.length < totalLen) {
+    return { status: 'incomplete' };
+  }
+
+  try {
+    const data = state.buffer.slice(4, totalLen);
+    const parsedMesh = JSON.parse(utf8Decoder.decode(data));
+    if (!isValidStreamMesh(parsedMesh)) {
+      return { status: 'invalid' };
+    }
+    const mesh = normalizeStreamMesh(parsedMesh, state.prefixIdKey);
+    return { status: 'success', mesh, totalLen };
+  } catch (e) {
+    return { status: 'invalid' };
+  }
+}
+
+function parsePrimitiveFromState(state) {
+  const dataView = new DataView(
+    state.buffer.buffer,
+    state.buffer.byteOffset,
+    state.buffer.byteLength
+  );
+  const primitiveResult = parsePrimitive(dataView, state.buffer, 0, state.isFullProps);
+  const primitiveData = primitiveResult.primitive;
+
+  _applyPrefixId(primitiveData, 'id', null, state.prefixIdKey);
+  _applyPrefixId(primitiveData, 'material', null, state.prefixIdKey);
+
+  if (state.isFullProps) {
+    const { position, normal, posindex, nolindex, indices } =
+      parsePrimitiveData(primitiveData);
+    const formatted = formatPrimitiveData({ position, normal, posindex, nolindex });
+    delete primitiveData.nolindex;
+    delete primitiveData.posindex;
+    primitiveData.position = formatted.position;
+    primitiveData.normal = formatted.normal;
+    primitiveData.indices = indices;
+  }
+
+  return {
+    primitive: primitiveData,
+    consumedBytes: primitiveResult.offset,
+  };
+}
+
 function parseBufferData(buffer, prefixIdKey) {
   let uint8Array = null;
   let dataView = null;
@@ -288,8 +369,20 @@ function parsePrimitive(dataView, uint8Array, offset, isFullProps = true) {
   if (dataView.byteLength < offset + 12) {
     throw new Error('Insufficient data for primitive header');
   }
-  primitive.id = dataView.getInt32(offset, false);
+  const primitiveIdTextLen = dataView.getUint32(offset, false);
   offset += 4;
+  if (primitiveIdTextLen === 0xffffffff) {
+    primitive.id = null;
+  } else if (primitiveIdTextLen > 0) {
+    if (dataView.byteLength < offset + primitiveIdTextLen) {
+      throw new Error('Insufficient data for primitive id content');
+    }
+    const textBytes = uint8Array.subarray(offset, offset + primitiveIdTextLen);
+    primitive.id = utf8Decoder.decode(textBytes);
+    offset += primitiveIdTextLen;
+  } else {
+    primitive.id = '';
+  }
 
   if (dataView.byteLength < offset + 4) {
     throw new Error('Insufficient data for GeomText length');
@@ -309,11 +402,26 @@ function parsePrimitive(dataView, uint8Array, offset, isFullProps = true) {
     primitive.documentId = '';
   }
 
-  primitive.material = dataView.getInt32(offset, false);
-  offset += 4;
-
-  if (dataView.byteLength < offset + 4) {
-    throw new Error('Insufficient data for GeomText length');
+  if (dataView.byteLength < offset + 4) {
+    throw new Error('Insufficient data for Material length');
+  }
+  const materialTextLen = dataView.getUint32(offset, false);
+  offset += 4;
+  if (materialTextLen === 0xffffffff) {
+    primitive.material = null;
+  } else if (materialTextLen > 0) {
+    if (dataView.byteLength < offset + materialTextLen) {
+      throw new Error('Insufficient data for Material content');
+    }
+    const textBytes = uint8Array.subarray(offset, offset + materialTextLen);
+    primitive.material = utf8Decoder.decode(textBytes);
+    offset += materialTextLen;
+  } else {
+    primitive.material = '';
+  }
+
+  if (dataView.byteLength < offset + 4) {
+    throw new Error('Insufficient data for GeomText length');
   }
   const geomTextLen = dataView.getUint32(offset, false);
   offset += 4;

package/src/utils/flgltf-parser.js

@@ -24,8 +24,12 @@ function processMeshData(input, options) {
     }
   }
 
+  const identity = new THREE.Matrix4().identity();
+  const identityElements = identity.elements;
+
   input.mesh.forEach(meshItem => {
     const geomList = [];
+    const meshMatrix = meshItem.matrix?.length ? meshItem.matrix : identityElements;
     meshItem.primitives.forEach(primitive => {
       const primitiveData = input.primitive.find(g => g.id === primitive.prmid);
       if (primitiveData) {
@@ -34,26 +38,27 @@ function processMeshData(input, options) {
         const material = mergedMaterial || baseMaterial;
         const sourceVisible =
           mergedMaterial?.visible === false || baseMaterial?.visible === false ? false : true;
+        const baseColor = [255, 255, 255, 1];
         const prop = {
-          color: material?.color || [255, 255, 255, 1],
+          color: material?.color
+            ? material?.color.length
+              ? material.color
+              : baseColor
+            : baseColor,
           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, // 默认值
+          linewidth: material?.linewidth !== undefined ? material?.linewidth : 10, // 默认值
           visible: sourceVisible,
           sourceVisible,
           transparent: material?.transp !== undefined ? material?.transp : 0,
         };
 
-        const identity = new THREE.Matrix4().identity();
-
         geomList.push({
           matrix: {
-            val: primitive.matrix?.length ? primitive.matrix : identity.elements,
-            // val: identity.elements,
+            val: primitive.matrix?.length ? primitive.matrix : identityElements,
           },
-          // originMatrix: meshItem.id == primitive.prmid ? [] : identity.elements,
           prmid: primitive.prmid,
           geomId: primitiveData.id,
           type: primitiveData.geomType,
@@ -71,6 +76,9 @@ function processMeshData(input, options) {
 
     drawObjMap.set(meshItem.id, {
       drawObjId: meshItem.id,
+      matrix: {
+        val: meshMatrix,
+      },
       geoms: geomList,
       // lodLevel: meshItem.type || 2,
     });
@@ -146,7 +154,7 @@ function processOnePrimtiveToMultiMesh(primitive) {
   return {
     instanceId: primitive.drawObjId, // 实例与drawObj一对多关系
     drawObject: primitive.geoms[0]?.prmid || '',
-    matrix: primitive.geoms[0]?.matrix || [],
+    matrix: primitive.matrix || {},
   };
 }
 
@@ -240,6 +248,8 @@ function parseNode(node, isFlatNode) {
 // 生成默认node节点
 function generateNode(mesh) {
   let nodes = [];
+  const identity = new THREE.Matrix4().identity();
+  const identityElements = identity.elements;
   mesh.forEach(item => {
     if (item.primitives.length) {
       let tempNode = {
@@ -247,7 +257,9 @@ function generateNode(mesh) {
         _batchId: item.id,
         name: item.id,
         mesh: item.id,
-        matrix: {},
+        matrix: {
+          val: item.matrix?.length ? item.matrix : identityElements,
+        },
         nodeType: 3,
       };
       nodes.push(tempNode);

package/src/utils/instance-parser.js

@@ -5,7 +5,7 @@ import helvetikerFont from 'three/examples/fonts/helvetiker_regular.typeface.jso
 import { MeshLineGeometry, MeshLineMaterial } from 'meshline';
 import StreamLoaderParserWorker from '../../packages/utils/StreamLoaderParser.worker.js';
 
-const GEOM_TYPES = {
+export const GEOM_TYPES = {
   geom_3d: 53248,
   geom_3d_text: 53249,
   geom_3d_mtext: 53250,
@@ -91,15 +91,46 @@ function requestInstancedMapping(instances, drawObjs) {
   });
 }
 
-function getInstanceNormalSign(matrix) {
-  if (!matrix || typeof matrix.determinant !== 'function') return 1;
-  return matrix.determinant() < 0 ? -1 : 1;
-}
-
-/**
- * 重置处理状态，用于新的批量加载会话
- */
-function resetProcessingState() {
+function getInstanceNormalSign(matrix) {
+  if (!matrix || typeof matrix.determinant !== 'function') return 1;
+  return matrix.determinant() < 0 ? -1 : 1;
+}
+
+function getMatrixVal(matrix) {
+  const val = matrix && matrix.val ? matrix.val : matrix;
+  return val && val.length >= 16 ? val : null;
+}
+
+function composeInstanceMatrix(instance, mesh, geometry) {
+  const resultMatrix = new THREE.Matrix4();
+  const meshMatrix = new THREE.Matrix4();
+  const primitiveMatrix = new THREE.Matrix4();
+  const meshMatrixVal = getMatrixVal(instance && instance.matrix);
+  const primitiveMatrixVal = getMatrixVal(mesh && mesh.matrix);
+
+  if (meshMatrixVal) {
+    meshMatrix.fromArray(meshMatrixVal);
+  }
+  if (primitiveMatrixVal) {
+    primitiveMatrix.fromArray(primitiveMatrixVal);
+  }
+
+  const { points, alignType } = mesh || {};
+  if (mesh && isTextType(mesh.type) && points && points.length >= 3) {
+    const positionMatrix = new THREE.Matrix4();
+    const alignMatrix = createAlignedText(alignType, geometry);
+    positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
+    primitiveMatrix.multiply(alignMatrix).multiply(positionMatrix);
+  }
+
+  resultMatrix.multiplyMatrices(meshMatrix, primitiveMatrix);
+  return resultMatrix;
+}
+
+/**
+ * 重置处理状态，用于新的批量加载会话
+ */
+function resetProcessingState() {
   drawObjMapInstance = {};
   // instanceToInstancedMeshMap.clear();
   // processedDrawObjects.clear();
@@ -434,47 +465,27 @@ function setInstanceMatricesAndColors(model, drawObj, mesh, meshName, customColo
 
     // const instancedMesh = instanceToInstancedMeshMap.get(item.instanceId);
 
-    // 处理矩阵变换
-    const matrixVal = item.matrix?.val;
-    if (matrixVal) {
-      const m4 = new THREE.Matrix4();
-      const meshMatrix = new THREE.Matrix4();
-      const geomMatrix = new THREE.Matrix4();
-
-      meshMatrix.fromArray(matrixVal);
-      geomMatrix.fromArray(new THREE.Matrix4().identity().elements);
-
-      // 处理文本居中对齐
-      const { points, alignType } = mesh;
-      if (isTextType(mesh.type)) {
-        const positionMatrix = new THREE.Matrix4();
-        const alignMatrix = createAlignedText(alignType, model.geometry);
-        positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
-        geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
-      }
-
-      m4.multiplyMatrices(meshMatrix, geomMatrix);
-      model.setMatrixAt(index, m4);
-
-      const normalSignAttr = model.geometry && model.geometry.getAttribute('instanceNormalSign');
-      if (normalSignAttr && normalSignAttr.array && index < normalSignAttr.array.length) {
-        normalSignAttr.array[index] = getInstanceNormalSign(m4);
-      }
-
-      const copyMatrix = new THREE.Matrix4().copy(m4);
-      model.userData.copyMatrix = copyMatrix;
-
-      const temp = model.userData.instancesMap.get(item.instanceId);
-      temp.copyMatrix = copyMatrix;
-      if (sourceVisible === false) {
-        const offsetMatrix = new THREE.Matrix4()
-          .copy(copyMatrix)
-          .makeTranslation(9999999, 9999999, 9999999);
-        model.setMatrixAt(index, offsetMatrix);
-      }
-    }
-
-    // 设置颜色
+    const m4 = composeInstanceMatrix(item, mesh, model.geometry);
+    model.setMatrixAt(index, m4);
+
+    const normalSignAttr = model.geometry && model.geometry.getAttribute('instanceNormalSign');
+    if (normalSignAttr && normalSignAttr.array && index < normalSignAttr.array.length) {
+      normalSignAttr.array[index] = getInstanceNormalSign(m4);
+    }
+
+    const copyMatrix = new THREE.Matrix4().copy(m4);
+    model.userData.copyMatrix = copyMatrix;
+
+    const temp = model.userData.instancesMap.get(item.instanceId);
+    temp.copyMatrix = copyMatrix;
+    if (sourceVisible === false) {
+      const offsetMatrix = new THREE.Matrix4()
+        .copy(copyMatrix)
+        .makeTranslation(9999999, 9999999, 9999999);
+      model.setMatrixAt(index, offsetMatrix);
+    }
+
+    // 设置颜色
     model.setColorAt(index, meshColor);
   });
 
@@ -549,25 +560,9 @@ function appendInstanceToInstancedMesh(model, drawObj, mesh, instance, customCol
     ? new THREE.Color(customColor)
     : new THREE.Color(`rgb(${colorArr[0]}, ${colorArr[1]}, ${colorArr[2]})`);
 
-  const matrixVal = instance.matrix?.val;
-  if (!matrixVal || !mesh || !mesh.matrix || !mesh.matrix.val) return;
-
-  const m4 = new THREE.Matrix4();
-  const meshMatrix = new THREE.Matrix4();
-  const geomMatrix = new THREE.Matrix4();
-
-  meshMatrix.fromArray(instance.matrix.val);
-  geomMatrix.fromArray(new THREE.Matrix4().identity().elements);
-
-  const { points, alignType } = mesh;
-  if (isTextType(mesh.type)) {
-    const positionMatrix = new THREE.Matrix4();
-    const alignMatrix = createAlignedText(alignType, model.geometry);
-    positionMatrix.identity().makeTranslation(points[0], points[1], points[2]);
-    geomMatrix.multiply(alignMatrix).multiply(positionMatrix);
-  }
-
-  m4.multiplyMatrices(meshMatrix, geomMatrix);
+  if (!mesh) return;
+
+  const m4 = composeInstanceMatrix(instance, mesh, model.geometry);
   const renderMatrix =
     sourceVisible === false
       ? new THREE.Matrix4().copy(m4).makeTranslation(9999999, 9999999, 9999999)
@@ -679,7 +674,7 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity, options
   let model;
   // 处理二维几何体（普通2D图形和特殊2D图形）
   if (geom.type == GEOM_TYPES.geom_2d || geom.type == GEOM_TYPES.geom_2d_others) {
-    model = draw2Dmodel(geom, instanceName, instanceCount, options); // TODO 该类型调试中
+    model = draw2Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, options); // TODO 该类型调试中
     // 处理二维文本类型
   } else if (isTextType(geom.type)) {
     model = drawText(geom, instanceName, instanceCount, options);
@@ -690,7 +685,7 @@ function drawModel(geom, instanceName, instanceCount, nColor, nOpacity, options
     geom.type == GEOM_TYPES.geom_2d_ellipse ||
     geom.type == GEOM_TYPES.geom_2d_ellipseArc
   ) {
-    model = drawCurves(geom, instanceName, instanceCount, options); // TODO 该类型调试中
+    model = drawCurves(geom, instanceName, instanceCount, nColor, nOpacity, options); // TODO 该类型调试中
     // 处理三维几何体（普通3D模型和OBJ模型）
   } else if (geom.type == GEOM_TYPES.geom_3d || geom.type == GEOM_TYPES.geom_3d_obj) {
     model = draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, options);
@@ -719,7 +714,7 @@ function isTextType(type) {
  * @param {String} instanceName- 曲线实例的名称
  * @return {Object}- 包含曲线模型和曲线信息的对象
  */
-function drawCurves(geom, instanceName, instanceCount, options = {}) {
+function drawCurves(geom, instanceName, instanceCount, nColor, nOpacity, options = {}) {
   let { points, normals } = geom;
   let aX = points[0];
   let aY = points[1];
@@ -760,6 +755,8 @@ function drawCurves(geom, instanceName, instanceCount, options = {}) {
     },
     instanceName,
     instanceCount,
+    nColor,
+    nOpacity,
     options
   );
   // model.rotation.x = -Math.PI / 2;
@@ -943,7 +940,8 @@ function draw3Dmodel(
   // 处理transparent透明度
   opacity = 1 - transparent;
 
-  const finalOpacity = nOpacity !== '' ? nOpacity : opacity;
+  const finalOpacity =
+    nOpacity !== undefined && nOpacity !== null && nOpacity !== '' ? nOpacity : opacity;
 
   // 判断是否全透明
   const isTransparent = finalOpacity < 1.0;
@@ -1070,7 +1068,7 @@ function draw3Dmodel(
  * @param {String} instanceName - 模型实例的名称
  * @returns {Object} - 包含所有 2D 模型的组对象
  */
-function draw2Dmodel(geom, instanceName, instanceCount, options = {}) {
+function draw2Dmodel(geom, instanceName, instanceCount, nColor, nOpacity, options = {}) {
   const points = geom.points;
   const normals = geom.normals;
   const geometry = new THREE.BufferGeometry();
@@ -1103,6 +1101,8 @@ function draw2Dmodel(geom, instanceName, instanceCount, options = {}) {
     },
     instanceName,
     instanceCount,
+    nColor,
+    nOpacity,
     options
   );
   // mesh.raycast = raycast;