fl-web-component 1.1.9 → 1.1.11

package/src/utils/flgltf-parser.js

@@ -135,8 +135,8 @@ function parseData(input) {
   const map = {
     drawObjs: Array.from(drawObjMap.values()),
     instances: formatInstances,
-  }
-  console.log('parseData', map)
+  };
+  console.log('parseData', map);
   return map;
 }
 

package/src/utils/instance-parser.js

@@ -25,7 +25,15 @@ let drawObjMapInstance = {};
  * @param {Object} instance - 实例对象，包含绘制对象ID和实例ID等数据
  * @param {Array} drawObjs - 绘制对象数组，包含几何数据
  */
-function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor, meshNameConfig) {
+function handleInstancedMeshModel(
+  instances,
+  drawObjs,
+  type,
+  scene,
+  customColor,
+  meshNameConfig,
+  customOpacity
+) {
   // 第一阶段：构建实例映射表
   let modelGroup = new THREE.Group();
   for (let i = 0; i < instances.length; i++) {
@@ -50,7 +58,7 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
         const group = new THREE.Group();
         // let grouphName = ''
         for (const key in meshNameConfig) {
-          group.userData[key] = meshNameConfig[key]
+          group.userData[key] = meshNameConfig[key];
           // grouphName += ':' + meshNameConfig[key]
         }
         // grouphName !== '' ? instances[i].drawObject + grouphName: instances[i].drawObject;
@@ -59,20 +67,27 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
         group.userData.instanceId = instances[i].drawObject;
         const instanceCount = drawObj.MapInstance.length;
         drawObj.MapMesh?.forEach(mesh => {
-          const model = drawModel(mesh, instances[i].drawObject, instanceCount, customColor);
+          const model = drawModel(
+            mesh,
+            instances[i].drawObject,
+            instanceCount,
+            customColor,
+            customOpacity
+          );
           if (!model) {
             return;
           }
-          let meshName = ''
+          let meshName = '';
           for (const key in meshNameConfig) {
-            model.userData[key] = meshNameConfig[key]
-            meshName += ':' + meshNameConfig[key]
+            model.userData[key] = meshNameConfig[key];
+            meshName += ':' + meshNameConfig[key];
           }
           drawObj.MapInstance.forEach((item, index) => {
             if (item.instanceId == instances[i].instanceId) {
               model.userData.instanceIndex = index;
-              model.userData.instanceId = instances[i].instanceId
-              model.name = meshName !== '' ? (instances[i].instanceId + meshName) : instances[i].instanceId;
+              model.userData.instanceId = instances[i].instanceId;
+              model.name =
+                meshName !== '' ? instances[i].instanceId + meshName : instances[i].instanceId;
               const matrixVal = item.matrix?.val;
               if (matrixVal) {
                 const m4 = new THREE.Matrix4();
@@ -96,10 +111,9 @@ function handleInstancedMeshModel(instances, drawObjs, type, scene, customColor,
         modelGroup.add(group);
       }
     }
-
   }
-  console.log('modelGroup', modelGroup)
-  console.log('drawObjMapInstance', drawObjMapInstance)
+  console.log('modelGroup', modelGroup);
+  console.log('drawObjMapInstance', drawObjMapInstance);
   return modelGroup;
   // timeRender();
   // console.log('scene', scene)
@@ -159,7 +173,7 @@ function formatDrawObjs(data) {
  * @param {Number} instanceCount - 实例化渲染的数量（用于InstancedMesh）
  * @returns {THREE.Object3D} 返回创建的3D模型对象
  */
-function drawModel(geom, instanceName, instanceCount, nColor) {
+function drawModel(geom, instanceName, instanceCount, nColor, nOpacity) {
   let model;
   // 处理二维几何体（普通2D图形和特殊2D图形）
   if (geom.type == GEOM_TYPES.geom_2d || geom.type == GEOM_TYPES.geom_2d_others) {
@@ -179,10 +193,10 @@ function drawModel(geom, instanceName, instanceCount, nColor) {
     geom.type == GEOM_TYPES.geom_2d_ellipse ||
     geom.type == GEOM_TYPES.geom_2d_ellipseArc
   ) {
-    model = drawCurves(geom, instanceName, instanceCount);// TODO 该类型调试中
+    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);
+    model = draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity);
   }
   return model;
 }
@@ -252,7 +266,7 @@ function drawCurves(geom, instanceName, instanceCount) {
  * @param {Number} instanceCount - 需要创建的实例数量
  * @returns {THREE.InstancedMesh} - 返回创建的三维实例化网格对象
  */
-function draw3Dmodel(geom, instanceName, instanceCount, nColor) {
+function draw3Dmodel(geom, instanceName, instanceCount, nColor, nOpacity) {
   // 解构几何数据中的自定义几何体和材质
   const { geometry: customGeometry, material: customMaterial, triangles, points, normals } = geom;
   // 使用自定义几何体或创建新的缓冲几何体
@@ -275,13 +289,16 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor) {
     geometry.setAttribute('normal', new THREE.BufferAttribute(normal, 3));
   }
   const { color } = geom.prop;
-  let material, mesh, colors;
+  let material, mesh, colors, opacity;
   if (Array.isArray(color) && color.length) {
     colors = color;
+    opacity = colors[3];
   } else if (color) {
     colors = color.split(',');
+    opacity = colors[3];
   } else {
-    colors = [255, 255, 255, 255];
+    colors = [255, 255, 255];
+    opacity = 1;
   }
 
   // 使用自定义材质或创建标准材质（默认参数配置）
@@ -292,13 +309,59 @@ function draw3Dmodel(geom, instanceName, instanceCount, nColor) {
       envMapIntensity: 0.5, // 调低环境贴图的强度
       side: THREE.DoubleSide,
       userData: {
-        nColor: nColor ? new THREE.Color(nColor) : new THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
+        nColor: nColor
+          ? new THREE.Color(nColor)
+          : new THREE.Color(`rgb(${colors[0]}, ${colors[1]}, ${colors[2]})`),
+        nOpacity: nOpacity ? nOpacity : opacity,
       },
+      transparent: true, // 着色器中需要设置透明度
     });
 
+  // 为每个实例存储透明度（opacity）
+  const opacities = new Float32Array(instanceCount);
+
+  // 填充透明度数据
+  for (let i = 0; i < instanceCount; i++) {
+    opacities[i] = opacity;
+  }
+
+  // 创建实例属性并绑定到 InstancedMesh
+  geometry.setAttribute('opacity', new THREE.InstancedBufferAttribute(opacities, 1));
+
+  // 自定义着色器逻辑
+  if (!customMaterial) {
+    material.onBeforeCompile = shader => {
+      // 添加顶点着色器输入
+      shader.vertexShader = `
+          in float opacity; // 实例透明度属性
+          out float vAlpha;
+          ${shader.vertexShader}
+      `.replace(
+        '#include <begin_vertex>',
+        `
+          #include <begin_vertex>
+          vAlpha = opacity; // 传递透明度到片段着色器
+          `
+      );
+
+      // 修改片段着色器
+      shader.fragmentShader = `
+          in float vAlpha;
+          ${shader.fragmentShader}
+      `.replace(
+        '#include <alphatest_fragment>',
+        `
+          #include <alphatest_fragment>
+          diffuseColor.a *= vAlpha; // 应用实例透明度
+          `
+      );
+    };
+  }
   mesh = new THREE.InstancedMesh(geometry, material, instanceCount);
   mesh.userData.drawObjectId = instanceName;
 
+  // mesh.material = material;
+
   return mesh;
 }