pbr rendering

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} />
+      <spotLight
-      <ambientLight intensity={1} />
+        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 />