fix: external modules not contributong to spaced armor detph buffer

src/components/ArmorMesh/components/SpacedArmorDepth/index.tsx

@@ -1,65 +1,72 @@
-import { MeshProps } from '@react-three/fiber';
-import { WebGLRenderTarget } from 'three';
+import {
+  MeshBasicMaterial,
+  Object3D,
+  ShaderMaterial,
+  WebGLRenderTarget,
+} from 'three';
+import { jsxTree } from '../../../../core/blitzkrieg/jsxTree';
 import { ArmorMeshUserData } from '../Armor';
 import fragmentShader from './shaders/fragment.glsl';
 import vertexShader from './shaders/vertex.glsl';
 
 export const spacedArmorDepthRenderTarget = new WebGLRenderTarget();
 
-type ArmorMeshSpacedArmorDepthProps = MeshProps & {
+type ArmorMeshSpacedArmorDepthProps = {
   ornamental?: boolean;
+  node: Object3D;
 } & (
-    | {
-        include?: false;
-        isExternalModule: boolean;
-      }
-    | {
-        include: true;
-        thickness: number;
-        maxThickness: number;
-      }
-  );
+  | {
+      include?: false;
+      isExternalModule: boolean;
+    }
+  | {
+      include: true;
+      thickness: number;
+      maxThickness: number;
+    }
+);
+
+const excludeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+});
+const includeMaterial = new MeshBasicMaterial({
+  colorWrite: false,
+  depthWrite: false,
+});
 
 export function ArmorMeshSpacedArmorDepth({
   ornamental = false,
+  node,
   ...props
 }: ArmorMeshSpacedArmorDepthProps) {
   return (
     <>
-      {!props.include && !ornamental && (
-        <mesh {...props} renderOrder={props.isExternalModule ? 2 : 0}>
-          <meshBasicMaterial colorWrite={false} />
-        </mesh>
-      )}
+      {!props.include &&
+        !ornamental &&
+        jsxTree(node, {
+          renderOrder: props.isExternalModule ? 2 : 0,
+          material: excludeMaterial,
+        })}
 
-      {props.include && (
-        <mesh
-          {...props}
-          renderOrder={1}
-          onClick={ornamental ? () => {} : undefined}
-          userData={
-            {
-              type: 'spacedArmor',
-              thickness: props.thickness,
-            } satisfies ArmorMeshUserData
-          }
-        >
-          {!ornamental && (
-            <shaderMaterial
-              fragmentShader={fragmentShader}
-              vertexShader={vertexShader}
-              uniforms={{
-                thickness: { value: props.thickness },
-                maxThickness: { value: props.maxThickness },
-              }}
-            />
-          )}
-
-          {ornamental && (
-            <meshBasicMaterial colorWrite={false} depthWrite={false} />
-          )}
-        </mesh>
-      )}
+      {props.include &&
+        jsxTree(node, {
+          renderOrder: 1,
+          onClick: ornamental ? () => {} : undefined,
+          userData: {
+            type: 'spacedArmor',
+            thickness: props.thickness,
+          } satisfies ArmorMeshUserData,
+          material: ornamental
+            ? includeMaterial
+            : new ShaderMaterial({
+                fragmentShader,
+                vertexShader,
+                uniforms: {
+                  thickness: { value: props.thickness },
+                  maxThickness: { value: props.maxThickness },
+                },
+              }),
+        })}
     </>
   );
 }