feat: add landscape && fix shadow

shared/components/3dModels/Bottom.tsx

@@ -68,6 +68,8 @@ const Bottom = () => {
 
   bottom.scale.set(1, 1, 1);
   bottom.position.set(0, 0, 0);
+  bottom.receiveShadow = true;
+  bottom.castShadow = true;
   return <primitive object={bottom} />;
 };
 

shared/components/canvas/Base.tsx

@@ -1,7 +1,7 @@
 import { useGLTF } from '@react-three/drei';
 
 const Base = () => {
-  const base = useGLTF('/assets/bases/ground1.glb').scene.clone();
+  const base = useGLTF('/assets/bases/base1.glb').scene.clone();
 
   base.scale.set(1, 1, 1);
   base.position.set(0, 0, 0);

shared/components/canvas/Decoration.tsx

@@ -146,7 +146,7 @@ const Decoration = ({
       child.userData.color = color;
       child.userData.letterColor = MSG_COLOR[letterID].color;
       child.userData.messageID = messageID;
-      child.castShadow = true;
+      child.castShadow = false;
       if (child.name === 'Main') {
         child.material = makeColorChangedMaterial(child, color);
       }

shared/components/canvas/Glass.tsx

@@ -1,3 +1,4 @@
+import { Sphere } from '@react-three/drei';
 import { Color, Vector3 } from 'three';
 
 const Glass = () => {
@@ -6,16 +7,20 @@ const Glass = () => {
   const position = new Vector3(0, radius / 2, 0);
 
   return (
-    <mesh position={position} name={'glass'}>
-      <sphereGeometry args={[radius, 36, 32]} />
+    <Sphere
+      args={[radius, 36, 32]}
+      position={position}
+      castShadow={true}
+      receiveShadow={true}
+    >
       <meshStandardMaterial
         transparent={true}
         color={color}
         opacity={0.1}
         roughness={0}
         metalness={1}
       />
-    </mesh>
+    </Sphere>
   );
 };
 

shared/components/canvas/Ground.tsx

@@ -0,0 +1,16 @@
+import { useGLTF } from '@react-three/drei';
+
+const Ground = () => {
+  const ground = useGLTF('/assets/grounds/winter.glb').scene.clone();
+
+  ground.scale.set(20, 20, 20);
+  ground.position.set(0, -5, 0);
+  ground.children.forEach((e) => (e.receiveShadow = true));
+  ground.castShadow = true;
+  ground.receiveShadow = true;
+  ground.name = 'Ground';
+
+  return <primitive object={ground} />;
+};
+
+export default Ground;

shared/components/canvas/MainDecoration.tsx

@@ -61,7 +61,7 @@ const MainDecoration = () => {
   deco.name = 'MainDeco';
   deco.scale.set(1, 1, 1);
   deco.position.set(0, 10, 0);
-  deco.children.forEach((mesh) => (mesh.castShadow = true));
+  deco.children.forEach((mesh) => (mesh.castShadow = false));
 
   useFrame((_, delta) => {
     if (delta > 1) {

shared/components/canvas/SnowGlobeCanvas.tsx

@@ -8,6 +8,7 @@ import MainDecoration from './MainDecoration';
 import Glass from './Glass';
 import Decorations from './Decorations';
 import Snowflake from './Snowflake';
+import Ground from './Ground';
 
 const SnowGlobeCanvas = () => {
   return (
@@ -29,10 +30,18 @@ const SnowGlobeCanvas = () => {
         <OrbitControls target={[0, 0, 0]} enablePan={false} />
         <ambientLight intensity={1} color={'#ffffff'} />
         <directionalLight
-          position={[10, 10, 10]}
+          position={[10, 20, 10]}
           intensity={2}
           color={'#ffffff'}
-          castShadow
+          castShadow={true}
+          shadow-mapSize-width={2048} // shadow resolution
+          shadow-mapSize-height={2048}
+          shadow-camera-far={50} // default is 50
+          shadow-camera-near={1}
+          shadow-camera-left={-15}
+          shadow-camera-right={15}
+          shadow-camera-top={15}
+          shadow-camera-bottom={-15}
         />
         <Glass />
         {Array.from({ length: 100 }, (_, i) => (
@@ -42,6 +51,7 @@ const SnowGlobeCanvas = () => {
         <MainDecoration />
         <Base />
         <Bottom />
+        <Ground />
       </Canvas>
     </section>
   );