fl-web-component 2.0.19 → 2.1.1-beta.1

package/src/utils/dxf-parser/entities/mtext.js

@@ -0,0 +1,57 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'MTEXT';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr !== 'EOF') {
+        if(curr.code === 0) break;
+
+        switch(curr.code) {
+        case 3:
+        case 1:
+            entity.text ? entity.text += curr.value : entity.text = curr.value;
+            break;
+        case 10:
+            entity.position = helpers.parsePoint(scanner);
+            break;
+        case 11:
+            entity.direction = helpers.parsePoint(scanner);
+            break;
+        case 40:
+            //Note: this is the text height
+            entity.height = curr.value;
+            break;
+        case 41:
+            entity.width = curr.value;
+            break;
+        case 44:
+            entity.lineSpacing = curr.value;
+            break;
+        case 50:
+            entity.rotation = curr.value;
+            break;
+        case 7: // Text style name
+            entity.styleName = curr.value;
+            break;
+        case 71:
+            entity.attachmentPoint = curr.value;
+            break;
+        case 72:
+            entity.drawingDirection = curr.value;
+            break;
+        case 101:
+            helpers.skipEmbeddedObject(scanner);
+            break;
+        default:
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+        curr = scanner.next();
+    }
+    return entity;
+};

package/src/utils/dxf-parser/entities/point.js

@@ -0,0 +1,35 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'POINT';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity;
+    entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr !== 'EOF') {
+        if(curr.code === 0) break;
+
+        switch(curr.code) {
+        case 10:
+            entity.position = helpers.parsePoint(scanner);
+            break;
+        case 39:
+            entity.thickness = curr.value;
+            break;
+        case 210:
+            entity.extrusionDirection = helpers.parsePoint(scanner);
+            break;
+        case 100:
+            break;
+        default: // check common entity attributes
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+        curr = scanner.next();
+    }
+
+    return entity;
+};

package/src/utils/dxf-parser/entities/polyline.js

@@ -0,0 +1,92 @@
+
+import * as helpers from "../ParseHelpers.js"
+import VertexParser from "./vertex.js";
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'POLYLINE';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity = { type: curr.value, vertices: [] };
+    curr = scanner.next();
+    while(curr !== 'EOF') {
+        if(curr.code === 0) break;
+
+        switch(curr.code) {
+        case 10: // always 0
+            break;
+        case 20: // always 0
+            break;
+        case 30: // elevation
+            break;
+        case 39: // thickness
+            entity.thickness = curr.value;
+            break;
+        case 40: // start width
+            break;
+        case 41: // end width
+            break;
+        case 70:
+            entity.shape = (curr.value & 1) !== 0;
+            entity.includesCurveFitVertices = (curr.value & 2) !== 0;
+            entity.includesSplineFitVertices = (curr.value & 4) !== 0;
+            entity.is3dPolyline = (curr.value & 8) !== 0;
+            entity.is3dPolygonMesh = (curr.value & 16) !== 0;
+            entity.is3dPolygonMeshClosed = (curr.value & 32) !== 0; // 32 = The polygon mesh is closed in the N direction
+            entity.isPolyfaceMesh = (curr.value & 64) !== 0;
+            entity.hasContinuousLinetypePattern = (curr.value & 128) !== 0;
+            break;
+        case 71: // Polygon mesh M vertex count
+            break;
+        case 72: // Polygon mesh N vertex count
+            break;
+        case 73: // Smooth surface M density
+            break;
+        case 74: // Smooth surface N density
+            break;
+        case 75: // Curves and smooth surface type
+            break;
+        case 210:
+            entity.extrusionDirection = helpers.parsePoint(scanner);
+            break;
+        default:
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+        curr = scanner.next();
+    }
+
+    entity.vertices = parsePolylineVertices(scanner, curr);
+
+    return entity;
+};
+
+function parsePolylineVertices(scanner, curr) {
+    var vertexParser = new VertexParser();
+
+    var vertices = [];
+    while (!scanner.isEOF()) {
+        if (curr.code === 0) {
+            if (curr.value === 'VERTEX') {
+                vertices.push(vertexParser.parseEntity(scanner, curr));
+                curr = scanner.lastReadGroup;
+            } else if (curr.value === 'SEQEND') {
+                parseSeqEnd(scanner, curr);
+                break;
+            }
+        }
+    }
+    return vertices;
+};
+
+function parseSeqEnd(scanner, curr) {
+    var entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr != 'EOF') {
+        if (curr.code == 0) break;
+        helpers.checkCommonEntityProperties(entity, curr, scanner);
+        curr = scanner.next();
+    }
+
+    return entity;
+};

package/src/utils/dxf-parser/entities/solid.js

@@ -0,0 +1,40 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'SOLID';
+
+EntityParser.prototype.parseEntity = function(scanner, currentGroup) {
+    var entity;
+    entity = { type: currentGroup.value };
+    entity.points = [];
+    currentGroup = scanner.next();
+    while(currentGroup !== 'EOF') {
+        if(currentGroup.code === 0) break;
+
+        switch(currentGroup.code) {
+        case 10:
+            entity.points[0] = helpers.parsePoint(scanner);
+            break;
+        case 11:
+            entity.points[1] = helpers.parsePoint(scanner);
+            break;
+        case 12:
+            entity.points[2] = helpers.parsePoint(scanner);
+            break;
+        case 13:
+            entity.points[3] = helpers.parsePoint(scanner);
+            break;
+        case 210:
+            entity.extrusionDirection = helpers.parsePoint(scanner);
+            break;
+        default: // check common entity attributes
+            helpers.checkCommonEntityProperties(entity, currentGroup, scanner);
+            break;
+        }
+        currentGroup = scanner.next();
+    }
+
+    return entity;
+};

package/src/utils/dxf-parser/entities/spline.js

@@ -0,0 +1,70 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'SPLINE';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity;
+    entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr !== 'EOF')
+    {
+        if(curr.code === 0) break;
+
+        switch(curr.code) {
+        case 10:
+            if (!entity.controlPoints) entity.controlPoints = [];
+            entity.controlPoints.push(helpers.parsePoint(scanner));
+            break;
+        case 11:
+            if (!entity.fitPoints) entity.fitPoints = [];
+            entity.fitPoints.push(helpers.parsePoint(scanner));
+            break;
+        case 12:
+            entity.startTangent = helpers.parsePoint(scanner);
+            break;
+        case 13:
+            entity.endTangent = helpers.parsePoint(scanner);
+            break;
+        case 40:
+            if (!entity.knotValues) entity.knotValues = [];
+            entity.knotValues.push(curr.value);
+            break;
+        case 70:
+            if ((curr.value & 1) != 0) entity.closed = true;
+            if ((curr.value & 2) != 0) entity.periodic = true;
+            if ((curr.value & 4) != 0) entity.rational = true;
+            if ((curr.value & 8) != 0) entity.planar = true;
+            if ((curr.value & 16) != 0)
+            {
+                entity.planar = true;
+                entity.linear = true;
+            }
+            break;
+
+        case 71:
+            entity.degreeOfSplineCurve = curr.value;
+            break;
+        case 72:
+            entity.numberOfKnots = curr.value;
+            break;
+        case 73:
+            entity.numberOfControlPoints = curr.value;
+            break;
+        case 74:
+            entity.numberOfFitPoints = curr.value;
+            break;
+        case 210:
+            entity.extrusionDirection = helpers.parsePoint(scanner);
+            break;
+        default:
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+        curr = scanner.next();
+    }
+
+    return entity;
+};

package/src/utils/dxf-parser/entities/text.js

@@ -0,0 +1,50 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'TEXT';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity;
+        entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr !== 'EOF') {
+        if(curr.code === 0) break;
+        switch(curr.code) {
+        case 10: // X coordinate of 'first alignment point'
+            entity.startPoint = helpers.parsePoint(scanner);
+            break;
+        case 11: // X coordinate of 'second alignment point'
+            entity.endPoint = helpers.parsePoint(scanner);
+            break;
+        case 40: // Text height
+            entity.textHeight = curr.value;
+            break;
+        case 41:
+            entity.xScale = curr.value;
+            break;
+        case 50: // Rotation in degrees
+            entity.rotation = curr.value;
+            break;
+        case 7: // Text style name
+            entity.styleName = curr.value;
+            break;
+        case 1: // Text
+            entity.text = curr.value;
+            break;
+        // NOTE: 72 and 73 are meaningless without 11 (second alignment point)
+        case 72: // Horizontal alignment
+            entity.halign = curr.value;
+            break;
+        case 73: // Vertical alignment
+            entity.valign = curr.value;
+            break;
+        default: // check common entity attributes
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+        curr = scanner.next();
+    }
+    return entity;
+};

package/src/utils/dxf-parser/entities/vertex.js

@@ -0,0 +1,62 @@
+
+import * as helpers from "../ParseHelpers.js"
+
+export default function EntityParser() {}
+
+EntityParser.ForEntityName = 'VERTEX';
+
+EntityParser.prototype.parseEntity = function(scanner, curr) {
+    var entity = { type: curr.value };
+    curr = scanner.next();
+    while(curr !== 'EOF') {
+        if(curr.code === 0) break;
+
+        switch(curr.code) {
+        case 10:    // X
+            entity.x = curr.value;
+            break;
+        case 20: // Y
+            entity.y = curr.value;
+            break;
+        case 30: // Z
+            entity.z = curr.value;
+            break;
+        case 40: // start width
+            break;
+        case 41: // end width
+            break;
+        case 42: // bulge
+            if(curr.value != 0) entity.bulge = curr.value;
+            break;
+        case 70: // flags
+            entity.curveFittingVertex = (curr.value & 1) !== 0;
+            entity.curveFitTangent = (curr.value & 2) !== 0;
+            entity.splineVertex = (curr.value & 8) !== 0;
+            entity.splineControlPoint = (curr.value & 16) !== 0;
+            entity.threeDPolylineVertex = (curr.value & 32) !== 0;
+            entity.threeDPolylineMesh = (curr.value & 64) !== 0;
+            entity.polyfaceMeshVertex = (curr.value & 128) !== 0;
+            break;
+        case 50: // curve fit tangent direction
+            break;
+        case 71: // polyface mesh vertex index
+            entity.faces = [curr.value];
+            break;
+        case 72: // polyface mesh vertex index
+            entity.faces[1] = curr.value;
+            break;
+        case 73: // polyface mesh vertex index
+            entity.faces[2] = curr.value;
+            break;
+        case 74: // polyface mesh vertex index
+            entity.faces[3] = curr.value;
+            break;
+        default:
+            helpers.checkCommonEntityProperties(entity, curr, scanner);
+            break;
+        }
+
+        curr = scanner.next();
+    }
+    return entity;
+};

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,
@@ -96,6 +96,37 @@ function getInstanceNormalSign(matrix) {
   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;
+}
+
 /**
  * 重置处理状态，用于新的批量加载会话
  */
@@ -434,44 +465,24 @@ 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 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 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 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 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);
     }
 
     // 设置颜色
@@ -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);
-  }
+  if (!mesh) return;
 
-  m4.multiplyMatrices(meshMatrix, geomMatrix);
+  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;