feat: non-pbr tank lighting and model cache

src/app/tools/tankopedia/[id]/components/Lighting.tsx

@@ -1,15 +1,24 @@
-export function Lighting() {
+import { useModel } from '../../../../../hooks/useModel';
+import { Duel } from '../page';
+
+interface LightingProps {
+  duel: Duel;
+}
+
+export function Lighting({ duel }: LightingProps) {
+  const { hasPbr } = useModel(duel.protagonist.tank.id);
+
   return (
     <>
       <directionalLight
         position={[1, 1, -1]}
-        intensity={3}
+        intensity={hasPbr ? 3 : 5}
         castShadow
         color={'rgb(225, 225, 255)'}
       />
       <directionalLight
         position={[-1, 1, 1]}
-        intensity={2}
+        intensity={hasPbr ? 2 : 4}
         castShadow
         color={'rgb(240, 255, 240)'}
       />

src/app/tools/tankopedia/[id]/components/Model/TankSandbox.tsx

@@ -162,7 +162,7 @@ export function TankSandbox({ duel }: TankSandboxProps) {
               >
                 <Controls duel={duel} />
                 <SceneProps />
-                <Lighting />
+                <Lighting duel={duel} />
 
                 <Suspense
                   fallback={

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/ExternalModuleMask.tsx

@@ -114,7 +114,7 @@ export const ExternalModuleMask = memo<ExternalModuleMaskProps>(({ duel }) => {
   });
 
   const armorGltf = useArmor(duel.protagonist.tank.id);
-  const modelGltf = useModel(duel.protagonist.tank.id);
+  const { gltf: modelGltf } = useModel(duel.protagonist.tank.id);
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);

src/app/tools/tankopedia/[id]/components/Model/components/TankArmor/components/SpacedArmorDepth.tsx

@@ -120,7 +120,7 @@ export const SpacedArmorDepth = memo<SpacedArmorDepthProps>(({ duel }) => {
   });
 
   const armorGltf = useArmor(duel.protagonist.tank.id);
-  const modelGltf = useModel(duel.protagonist.tank.id);
+  const { gltf: modelGltf } = useModel(duel.protagonist.tank.id);
 
   const armorNodes = Object.values(armorGltf.nodes);
   const modelNodes = Object.values(modelGltf.nodes);

src/app/tools/tankopedia/[id]/components/Model/components/TankModel.tsx

@@ -122,7 +122,7 @@ export const TankModel = memo(({ duel: { protagonist } }: TankModelProps) => {
     tankModelDefinition.turrets[protagonist.turret.id];
   const gunModelDefinition = turretModelDefinition.guns[protagonist.gun.id];
 
-  const gltf = useModel(protagonist.tank.id);
+  const { gltf } = useModel(protagonist.tank.id);
   const nodes = Object.values(gltf.nodes);
 
   return (

src/hooks/useArmor.ts

@@ -1,7 +1,11 @@
-import { useLoader } from '@react-three/fiber';
+import { ObjectMap, useLoader } from '@react-three/fiber';
-import { GLTFLoader } from 'three-stdlib';
+import { GLTF, GLTFLoader } from 'three-stdlib';
 import { asset } from '../core/blitzkrieg/asset';
 
+const cache: Record<number, GLTF & ObjectMap> = {};
+
 export function useArmor(id: number) {
-  return useLoader(GLTFLoader, asset(`3d/tanks/armor/${id}.glb`));
+  const gltf = useLoader(GLTFLoader, asset(`3d/tanks/armor/${id}.glb`));
+  if (!cache[id]) cache[id] = gltf;
+  return cache[id];
 }

src/hooks/useModel.ts

@@ -1,7 +1,28 @@
-import { useLoader } from '@react-three/fiber';
+import { ObjectMap, useLoader } from '@react-three/fiber';
-import { GLTFLoader } from 'three-stdlib';
+import { Mesh, MeshStandardMaterial } from 'three';
+import { GLTF, GLTFLoader } from 'three-stdlib';
 import { asset } from '../core/blitzkrieg/asset';
 
+const cache: Record<
+  number,
+  {
+    gltf: GLTF & ObjectMap;
+    hasPbr: boolean;
+  }
+> = {};
+
 export function useModel(id: number) {
-  return useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+  const gltf = useLoader(GLTFLoader, asset(`3d/tanks/models/${id}.glb`));
+  if (!cache[id]) {
+    cache[id] = {
+      gltf,
+      hasPbr: Object.values(gltf.nodes).some(
+        (node) =>
+          node instanceof Mesh &&
+          node.material instanceof MeshStandardMaterial &&
+          node.material.roughnessMap !== null,
+      ),
+    };
+  }
+  return cache[id];
 }