diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx index 7dc694c4b..5383d6baa 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx @@ -221,11 +221,10 @@ export const ExternalModuleMask = memo( if (!isVisible || thickness === undefined || spaced) return null; return ( - + @@ -248,11 +247,13 @@ export const ExternalModuleMask = memo( if (!isVisible || thickness === undefined || spaced) return null; return ( - + diff --git a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx index 9190bdbf1..577ccf0a0 100644 --- a/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx +++ b/src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx @@ -1,5 +1,5 @@ import { memo, useEffect, useRef } from 'react'; -import { Euler, Group, Mesh, Vector3 } from 'three'; +import { Euler, Group, Vector3 } from 'three'; import { degToRad } from 'three/src/math/MathUtils'; import { ArmorMeshSpacedArmorDepth } from '../../../../../../../../../components/ArmorMesh/components/SpacedArmorDepth'; import { I_HAT, J_HAT, K_HAT } from '../../../../../../../../../constants/axis'; @@ -190,7 +190,7 @@ export const SpacedArmorDepth = memo( thickness={thickness} maxThickness={maxThickness} key={node.uuid} - geometry={(node as Mesh).geometry} + node={node} /> ); })} @@ -207,7 +207,7 @@ export const SpacedArmorDepth = memo( ornamental={ornamental} isExternalModule key={node.uuid} - geometry={(node as Mesh).geometry} + node={node} /> ); })} @@ -228,16 +228,16 @@ export const SpacedArmorDepth = memo( if (!isVisible || thickness === undefined) return null; return ( - + + + ); })} @@ -257,16 +257,19 @@ export const SpacedArmorDepth = memo( if (!isVisible || thickness === undefined) return null; return ( - + > + + ); })} @@ -284,7 +287,7 @@ export const SpacedArmorDepth = memo( ornamental={ornamental} isExternalModule key={node.uuid} - geometry={(node as Mesh).geometry} + node={node} /> ); })} diff --git a/src/components/ArmorMesh/components/SpacedArmorDepth/index.tsx b/src/components/ArmorMesh/components/SpacedArmorDepth/index.tsx index a28da6a13..9d61e0796 100644 --- a/src/components/ArmorMesh/components/SpacedArmorDepth/index.tsx +++ b/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 && ( - - - - )} + {!props.include && + !ornamental && + jsxTree(node, { + renderOrder: props.isExternalModule ? 2 : 0, + material: excludeMaterial, + })} - {props.include && ( - {} : undefined} - userData={ - { - type: 'spacedArmor', - thickness: props.thickness, - } satisfies ArmorMeshUserData - } - > - {!ornamental && ( - - )} - - {ornamental && ( - - )} - - )} + {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 }, + }, + }), + })} ); }