From 381a58bf8b5953d12d7a996758b811f8cb5e06f4 Mon Sep 17 00:00:00 2001
From: Huh Hyeongjun <hhj@devent.kr>
Date: Wed, 26 Feb 2025 22:52:23 +0900
Subject: [PATCH] fix: update cos to draw

---
 src/three/Space.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/three/Space.tsx b/src/three/Space.tsx
index 8aa7130..7a3e8b8 100644
--- a/src/three/Space.tsx
+++ b/src/three/Space.tsx
@@ -8,6 +8,8 @@ import { GLTFExporter } from "three/examples/jsm/Addons.js";
 import Car from "./Car";
 import instanceFleet from "@/api/axios";
 
+const scale = 51000;
+
 function Building({
   shape,
   extrudeSettings,
@@ -79,10 +81,9 @@ function Roads({ area }: { area: any }) {
   if (!area || area.length < 2) return null;
   const refLat = (area[1].lat + area[0].lat) / 2;
   const refLng = (area[1].lng + area[0].lng) / 2;
-  const scale = 51000;
 
   function project(lat: number, lng: number) {
-    const x = (lng - refLng) * scale;
+    const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
     const y = (lat - refLat) * scale;
     return new THREE.Vector2(x, y);
   }
@@ -203,18 +204,13 @@ export function Space() {
   const center = useAreaStore((state) => state.center);
   const refLat = (center[1].lat + center[0].lat) / 2;
   const refLng = (center[1].lng + center[0].lng) / 2;
-  const scale = 51000;
 
   function project(lat: number, lng: number) {
-    const x = (lng - refLng) * scale;
+    const x = (lng - refLng) * scale * Math.cos((refLat * Math.PI) / 180);
     const y = (lat - refLat) * scale;
     return new THREE.Vector2(x, y);
   }
 
-  useEffect(() => {
-    setRealCenter(center);
-  }, [areas]);
-
   const areaData = () => {
     const result: Array<{
       shape: THREE.Shape;
@@ -243,6 +239,10 @@ export function Space() {
     return result;
   };
 
+  useEffect(() => {
+    setRealCenter(center);
+  }, [areas]);
+
   const buildingsData = areaData();
 
   return (