fl-web-component 2.0.2 → 2.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fl-web-component",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "scripts": {
     "postinstall": "patch-package",
     "tip1": "仅调试本组件不涉及业务组件,请执行dev",

package/src/utils/instance-parser.js

@@ -91,6 +91,11 @@ function requestInstancedMapping(instances, drawObjs) {
   });
 }
 
+function getInstanceNormalSign(matrix) {
+  if (!matrix || typeof matrix.determinant !== 'function') return 1;
+  return matrix.determinant() < 0 ? -1 : 1;
+}
+
 /**
  * 重置处理状态，用于新的批量加载会话
  */
@@ -448,6 +453,11 @@ function setInstanceMatricesAndColors(model, drawObj, mesh, meshName, customColo
       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;
 
@@ -466,6 +476,10 @@ function setInstanceMatricesAndColors(model, drawObj, mesh, meshName, customColo
   if (model.instanceColor) {
     model.instanceColor.needsUpdate = true;
   }
+  const normalSignAttr = model.geometry && model.geometry.getAttribute('instanceNormalSign');
+  if (normalSignAttr) {
+    normalSignAttr.needsUpdate = true;
+  }
 
   if (Array.isArray(instances)) {
     const capacity =
@@ -546,6 +560,12 @@ function appendInstanceToInstancedMesh(model, drawObj, mesh, instance, customCol
   model.setMatrixAt(currentCount, m4);
   if (model.instanceMatrix) model.instanceMatrix.needsUpdate = true;
 
+  const normalSignAttr = model.geometry && model.geometry.getAttribute('instanceNormalSign');
+  if (normalSignAttr && normalSignAttr.array && currentCount < normalSignAttr.array.length) {
+    normalSignAttr.array[currentCount] = getInstanceNormalSign(m4);
+    normalSignAttr.needsUpdate = true;
+  }
+
   const copyMatrix = new THREE.Matrix4().copy(m4);
   model.userData.copyMatrix = copyMatrix;
   const instanceProps = {
@@ -948,35 +968,53 @@ function draw3Dmodel(
   );
 
   const opacities = new Float32Array(instanceCount);
+  const instanceNormalSigns = new Float32Array(instanceCount);
   for (let i = 0; i < instanceCount; i++) {
     opacities[i] = opacity;
+    instanceNormalSigns[i] = 1;
   }
   geometry.setAttribute('opacity', new THREE.InstancedBufferAttribute(opacities, 1));
+  geometry.setAttribute(
+    'instanceNormalSign',
+    new THREE.InstancedBufferAttribute(instanceNormalSigns, 1)
+  );
 
   if (!customMaterial) {
     material.onBeforeCompile = shader => {
+      const normalFragmentBegin = THREE.ShaderChunk.normal_fragment_begin.replace(
+        'float faceDirection = gl_FrontFacing ? 1.0 : - 1.0;',
+        'float faceDirection = (gl_FrontFacing ? 1.0 : - 1.0) * vInstanceNormalSign;'
+      );
+
       shader.vertexShader = `
-          in float opacity; // 实例透明度属性
-          out float vAlpha;
+          attribute float opacity; // 实例透明度属性
+          attribute float instanceNormalSign; // 镜像矩阵法线修正
+          varying float vAlpha;
+          varying float vInstanceNormalSign;
           ${shader.vertexShader}
       `.replace(
         '#include <begin_vertex>',
         `
           #include <begin_vertex>
           vAlpha = opacity; // 传递透明度到片段着色器
+          vInstanceNormalSign = instanceNormalSign;
           `
       );
       shader.fragmentShader = `
-          in float vAlpha;
+          varying float vAlpha;
+          varying float vInstanceNormalSign;
           ${shader.fragmentShader}
-      `.replace(
-        '#include <alphatest_fragment>',
-        `
+      `
+        .replace('#include <normal_fragment_begin>', normalFragmentBegin)
+        .replace(
+          '#include <alphatest_fragment>',
+          `
           #include <alphatest_fragment>
           diffuseColor.a *= vAlpha; // 应用实例透明度
           `
-      );
+        );
     };
+    material.customProgramCacheKey = () => 'instance-opacity-normal-sign-v2';
   }
 
   // 针对 MeshLineMaterial 开启实例化支持