From 14a2658a837f950068504e36578d19ab22f30a3c Mon Sep 17 00:00:00 2001
From: tresabhi <43380238+tresabhi@users.noreply.github.com>
Date: Tue, 9 Jun 2026 13:44:25 -0500
Subject: [PATCH] pbr rendering

---
 .../components/TankopediaSandbox/index.tsx    | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/packages/website-ue/src/components/TankopediaSandbox/index.tsx b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
index 0ab085262..9e3b93535 100644
--- a/packages/website-ue/src/components/TankopediaSandbox/index.tsx
+++ b/packages/website-ue/src/components/TankopediaSandbox/index.tsx
@@ -1,5 +1,6 @@
 import { OrbitControls } from "@react-three/drei";
 import { Canvas, useLoader } from "@react-three/fiber";
+import { Mesh, MeshStandardMaterial } from "three";
 import { GLTFLoader } from "three-stdlib";
 import styles from "./index.module.css";
 
@@ -27,7 +28,16 @@ function Content() {
   );
 
   gltf.scene.traverse((child) => {
+    if (
+      child instanceof Mesh &&
+      child.material instanceof MeshStandardMaterial
+    ) {
+      // TODO: remove this hack and fix the gltf
+      child.material.vertexColors = false;
+    }
+
     child.castShadow = true;
+    child.receiveShadow = true;
   });
 
   return (
@@ -36,12 +46,17 @@ function Content() {
         <primitive object={gltf.scene} />
       </group>
 
-      <pointLight castShadow position={[3, 10, 5]} intensity={2 ** 14} />
-      <ambientLight intensity={1} />
+      <spotLight
+        castShadow
+        position={[3, 10, 5]}
+        intensity={2 ** 10}
+        penumbra={1}
+      />
+      <ambientLight />
 
       <mesh receiveShadow position={[0, -1, 0]} rotation={[-Math.PI / 2, 0, 0]}>
         <planeGeometry args={[2 ** 8, 2 ** 8]} />
-        <meshStandardMaterial color="black" />
+        <meshStandardMaterial color="gray" />
       </mesh>
 
       <OrbitControls />