TresAbhi/blitzkit
1
0 Fork 0
mirror of https://github.com/blitzkit/blitzkit.git synced 2026-10-28 13:09:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat: outlines

Browse Source
This commit is contained in:
tresabhi committed 2025-03-23 17:41:38 -05:00
1 parent 7a8f88f224
commit 3b937a6f35
1 file changed
+40 -26
Download Patch File Download Diff File Expand all files Collapse all files
packages/website/src/components/Armor/components/DissectorSceneComponent.tsx
+40 -26
View File
@@ -1,15 +1,15 @@
import { asset, J_HAT } from '@blitzkit/core'; import { asset, J_HAT } from '@blitzkit/core';
import { import {
amberDark,
blueDark, blueDark,
bronzeDark, crimsonDark,
indigoDark, indigoDark,
mauveDark, mauveDark,
orangeDark, orangeDark,
plumDark, plumDark,
redDark, purpleDark,
skyDark,
slateDark, slateDark,
tomatoDark,
yellowDark,
} from '@radix-ui/colors'; } from '@radix-ui/colors';
import { import {
Base, Base,
@@ -25,6 +25,7 @@ import {
DoubleSide, DoubleSide,
Group, Group,
LineBasicMaterial, LineBasicMaterial,
LineSegments,
Material, Material,
MeshStandardMaterial, MeshStandardMaterial,
Plane, Plane,
@@ -58,16 +59,16 @@ const moduleColor: Record<string, Color> = {
Gunner1: new Color(mauveDark.mauve11), Gunner1: new Color(mauveDark.mauve11),
Loader1: new Color(mauveDark.mauve11), Loader1: new Color(mauveDark.mauve11),
SurveyingDevice: new Color(plumDark.plum8), SurveyingDevice: new Color(plumDark.plum7),
Radio: new Color(slateDark.slate8), Radio: new Color(slateDark.slate7),
Gun: new Color(blueDark.blue8), Gun: new Color(blueDark.blue8),
FuelTank: new Color(orangeDark.orange8), FuelTank: new Color(orangeDark.orange9),
Engine: new Color(redDark.red8), Engine: new Color(crimsonDark.crimson8),
AmmoBay: new Color(amberDark.amber8), AmmoBay: new Color(yellowDark.yellow9),
LeftTrack: new Color(bronzeDark.bronze8), LeftTrack: new Color(purpleDark.purple5),
RightTrack: new Color(bronzeDark.bronze8), RightTrack: new Color(purpleDark.purple5),
TurretRotator: new Color(indigoDark.indigo8), TurretRotator: new Color(indigoDark.indigo7),
Transmission: new Color(skyDark.sky8), Transmission: new Color(tomatoDark.tomato4),
}; };
const moduleOutlineColor: Record<string, Color> = { const moduleOutlineColor: Record<string, Color> = {
Armor: armorOutlineColor, Armor: armorOutlineColor,
@@ -120,13 +121,14 @@ export function DissectorSceneComponent({
clippingPlanes: isModule ? undefined : [clippingPlane.current], clippingPlanes: isModule ? undefined : [clippingPlane.current],
}), }),
); );
const outline = useRef<LineSegments>(null);
const outlineMaterial = useRef( const outlineMaterial = useRef(
new LineBasicMaterial({ new LineBasicMaterial({
transparent: !isModule, transparent: !isModule,
opacity: 2 ** -3, opacity: 2 ** -3,
side: DoubleSide, side: DoubleSide,
color: moduleOutlineColor[armorPlate.type], color: moduleOutlineColor[armorPlate.type],
clippingPlanes: isModule ? undefined : [clippingPlane.current], clippingPlanes: [clippingPlane.current],
}), }),
); );
const outlineMaterialInverse = useRef( const outlineMaterialInverse = useRef(
@@ -177,19 +179,31 @@ export function DissectorSceneComponent({
if (isModule) { if (isModule) {
return ( return (
<mesh material={material.current} ref={baseWrapper}> <>
<Geometry ref={csg}> <mesh
<Base geometry={props.geometry} /> material={material.current}
ref={baseWrapper}
onPointerDown={(event) => {
event.stopPropagation();
}}
>
<Geometry ref={csg}>
<Base geometry={props.geometry} />
<group rotation={[0, 0, 0]} ref={subtractionWrapper}> <group rotation={[0, 0, 0]} ref={subtractionWrapper}>
<Subtraction position={[NEGATIVE_SIZE / 2, 0, 0]}> <Subtraction position={[NEGATIVE_SIZE / 2, 0, 0]}>
<boxGeometry <boxGeometry
args={[NEGATIVE_SIZE, NEGATIVE_SIZE, NEGATIVE_SIZE]} args={[NEGATIVE_SIZE, NEGATIVE_SIZE, NEGATIVE_SIZE]}
/> />
</Subtraction> </Subtraction>
</group> </group>
</Geometry> </Geometry>
</mesh> </mesh>
<lineSegments ref={outline} material={outlineMaterial.current}>
<edgesGeometry args={[props.geometry, 45]} />
</lineSegments>
</>
); );
} }