style: Enhance lighting and shadow effects for improved visual depth and realism

client/src/components/Map3D.jsx

@@ -736,6 +736,8 @@ function BlockTypeInstances({ blockName, blockList, textures, multiFaceTextures,
             <mesh
               key={blockKey}
               position={[block.x, block.y, block.z]}
+              castShadow
+              receiveShadow
               onPointerOver={(e) => { e.stopPropagation(); setHoveredBlock(block); }}
               onPointerOut={() => setHoveredBlock(null)}
               onClick={(e) => {
@@ -759,11 +761,9 @@ function BlockTypeInstances({ blockName, blockList, textures, multiFaceTextures,
                   map={faceTexture}
                   color="#ffffff"
                   emissive={appearance.emissive || '#000000'}
-                  emissiveIntensity={isHovered ? 0.25 : (appearance.intensity || 0.02)}
+                  emissiveIntensity={isHovered ? 0.3 : (appearance.intensity || 0)}
-                  roughness={0.8}
+                  roughness={0.85}
                   metalness={0.0}
-                  transparent
-                  opacity={isHovered ? 0.98 : 0.9}
                 />
               ))}
             </mesh>
@@ -777,6 +777,8 @@ function BlockTypeInstances({ blockName, blockList, textures, multiFaceTextures,
     <instancedMesh
       ref={meshRef}
       args={[null, null, blockList.length]}
+      castShadow
+      receiveShadow
       onPointerMove={handlePointerMove}
       onPointerOut={handlePointerOut}
       onClick={handleClick}
@@ -785,12 +787,10 @@ function BlockTypeInstances({ blockName, blockList, textures, multiFaceTextures,
       <meshStandardMaterial
         map={texture}
         color={texture ? '#ffffff' : appearance.color}
-        emissive={appearance.emissive || appearance.color}
+        emissive={appearance.emissive || '#000000'}
-        emissiveIntensity={appearance.intensity || 0.05}
+        emissiveIntensity={appearance.intensity || 0}
-        roughness={appearance.pattern === 'ore' ? 0.4 : 0.8}
+        roughness={appearance.pattern === 'ore' ? 0.5 : 0.9}
-        metalness={appearance.pattern === 'ore' ? 0.2 : 0.0}
+        metalness={appearance.pattern === 'ore' ? 0.15 : 0.0}
-        transparent
-        opacity={0.9}
       />
     </instancedMesh>
   );
@@ -1200,20 +1200,46 @@ function Scene({ interactionMode, onInteraction }) {
 
   return (
     <>
-      <ambientLight intensity={0.6} />
+      {/* Soft ambient base - prevents pure black shadows */}
-      <pointLight position={[10, 10, 10]} intensity={1.2} />
+      <ambientLight intensity={0.3} color="#b0c4ff" />
-      <pointLight position={[-10, -10, -10]} intensity={0.6} />
+      
-      <pointLight position={[0, 20, 0]} intensity={0.8} color="#ffffff" />
+      {/* Hemisphere light - sky blue from above, ground brown from below */}
+      <hemisphereLight 
+        args={['#87ceeb', '#3b2f1e', 0.4]} 
+      />
+      
+      {/* Main directional sunlight with shadows */}
+      <directionalLight
+        position={[30, 50, 20]}
+        intensity={1.8}
+        color="#fff5e6"
+        castShadow
+        shadow-mapSize-width={2048}
+        shadow-mapSize-height={2048}
+        shadow-camera-far={150}
+        shadow-camera-left={-60}
+        shadow-camera-right={60}
+        shadow-camera-top={60}
+        shadow-camera-bottom={-60}
+        shadow-bias={-0.0005}
+      />
+      
+      {/* Subtle fill light from opposite side to soften shadows */}
+      <directionalLight
+        position={[-20, 10, -15]}
+        intensity={0.3}
+        color="#8ec5fc"
+      />
 
       {/* Grid */}
       <Grid
         args={[100, 100]}
         cellSize={1}
         cellThickness={0.5}
-        cellColor="#1e293b"
+        cellColor="#2a2a3a"
         sectionSize={5}
         sectionThickness={1}
-        sectionColor="#334155"
+        sectionColor="#3b3b4b"
         fadeDistance={50}
         fadeStrength={1}
         followCamera={false}
@@ -1395,11 +1421,13 @@ export default function Map3D() {
   }, []);
 
   return (
-    <div style={{ width: '100%', height: '100%', background: '#0a0e1a', position: 'relative' }}>
+    <div style={{ width: '100%', height: '100%', background: '#1a1a2e', position: 'relative' }}>
       <Canvas
         camera={{ position: [15, 15, 15], fov: 60 }}
-        style={{ background: '#0a0e1a' }}
+        shadows
+        style={{ background: '#1a1a2e' }}
       >
+        <fog attach="fog" args={['#1a1a2e', 60, 120]} />
         <Scene interactionMode={interactionMode} onInteraction={handleInteraction} />
       </Canvas>