From 640702d44dee3334eb9d702d714c5e15acabb855 Mon Sep 17 00:00:00 2001
From: Endo-Yuanteng <210224788+Endo-Yuanteng@users.noreply.github.com>
Date: Mon, 9 Mar 2026 00:02:31 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E3=83=9B=E3=83=BC=E3=83=A0=E7=94=BB?=
 =?UTF-8?q?=E9=9D=A2=E3=82=92=E7=B7=A8=E9=9B=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/Canvas.tsx |  1 +
 src/pages/Home/Scene.tsx  | 30 +++++++++++++-----
 src/pages/Home/index.tsx  | 64 +++++++++++++++++++++++++++++++++------
 3 files changed, 78 insertions(+), 17 deletions(-)

diff --git a/src/pages/Home/Canvas.tsx b/src/pages/Home/Canvas.tsx
index bb34c95..59eb3e5 100644
--- a/src/pages/Home/Canvas.tsx
+++ b/src/pages/Home/Canvas.tsx
@@ -7,6 +7,7 @@ interface Props {
 export default function ThreeCanvas(props: Props) {
 	return (
 		<Canvas camera={{ position: [0, 2, 5], fov: 60 }} shadows>
+			<color attach="background" args={["black"]} />
 			{props.children}
 		</Canvas>
 	);
diff --git a/src/pages/Home/Scene.tsx b/src/pages/Home/Scene.tsx
index 96877bd..6d20934 100644
--- a/src/pages/Home/Scene.tsx
+++ b/src/pages/Home/Scene.tsx
@@ -1,14 +1,28 @@
-interface Props {
-	color: string;
-}
+import { useFrame, useLoader } from "@react-three/fiber";
+import { useRef } from "react";
+import * as THREE from "three";
+import { earth, jupiter, mars, sun, venus } from "@/data/planets";
+import type { Planet } from "@/types/planet";
+
+export default function HomeScene() {
+	const planets = [earth, jupiter, mars, sun, venus];
+	const planet: Planet = planets[Math.floor(Math.random() * planets.length)];
+	const texture = useLoader(THREE.TextureLoader, planet.texturePath);
+	const planetRef = useRef<THREE.Mesh>(null);
+
+	useFrame((_, delta) => {
+		if (planetRef.current) {
+			planetRef.current.rotation.y += delta * 0.2;
+		}
+	});
 
-export default function Scene(props: Props) {
 	return (
 		<>
-			<ambientLight intensity={0.5} />
-			<mesh>
-				<boxGeometry />
-				<meshStandardMaterial color={props.color} />
+			<ambientLight intensity={1} />
+
+			<mesh ref={planetRef} position={[3, 0, -5]}>
+				<sphereGeometry args={[2, planet.width, planet.height]} />
+				<meshStandardMaterial map={texture} />
 			</mesh>
 		</>
 	);
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index c590a8a..1218b48 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,18 +1,64 @@
-import { Leva, useControls } from "leva";
+import { Stars } from "@react-three/drei";
+import { useNavigate } from "react-router-dom";
 import ThreeCanvas from "@/pages/Home/Canvas";
-import Scene from "@/pages/Home/Scene";
+import HomeScene from "@/pages/Home/Scene";
 
 export default function Page() {
-	const { color } = useControls({
-		color: { value: "orange" }, // 初期値
-	});
+	const navigate = useNavigate();
 
 	return (
-		<>
-			<Leva />
+		<div style={{ width: "100vw", height: "100vh", position: "relative" }}>
 			<ThreeCanvas>
-				<Scene color={color} />
+				<Stars
+					radius={100} // 星が広がる球の半径
+					depth={50} // 奥行き
+					count={5000} // 星の数
+					factor={4} // 星のサイズ
+					saturation={0} // 色の鮮やかさ
+					fade // 遠くの星をフェード
+					speed={1} // 動き速度
+				/>
+				<HomeScene />
 			</ThreeCanvas>
-		</>
+
+			<div
+				className={
+					"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-white"
+				}
+			>
+				<h1
+					className="
+						text-7xl
+						font-extrabold
+						tracking-widest
+						text-white
+						mb-10
+						animate-pulse
+						drop-shadow-[0_0_25px_rgba(255,255,255,0.8)]
+					"
+				>
+					SPACE SIMULATOR
+				</h1>
+				<button
+					type="button"
+					onClick={() => navigate("/simulation")}
+					className="
+						px-10 py-4
+						text-xl font-semibold
+						text-white
+						bg-blue-500
+						rounded-xl
+						shadow-lg shadow-blue-500/40
+						border border-blue-300
+						transition
+						hover:bg-blue-400
+						hover:scale-105
+						active:scale-95
+					"
+				>
+					[Start Simulation]
+				</button>
+			</div>
+		</div>
 	);
 }

From 1b56a470cabacb39fda1f022ef7b8b6528b8c510 Mon Sep 17 00:00:00 2001
From: Endo-Yuanteng <210224788+Endo-Yuanteng@users.noreply.github.com>
Date: Mon, 9 Mar 2026 18:18:36 +0900
Subject: [PATCH 2/2] =?UTF-8?q?=E3=83=AC=E3=83=93=E3=83=A5=E3=83=BC?=
 =?UTF-8?q?=E3=82=92=E5=9F=BA=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/Home/Scene.tsx | 3 ++-
 src/pages/Home/index.tsx | 8 ++------
 2 files changed, 4 insertions(+), 7 deletions(-)

diff --git a/src/pages/Home/Scene.tsx b/src/pages/Home/Scene.tsx
index 6d20934..4916ae5 100644
--- a/src/pages/Home/Scene.tsx
+++ b/src/pages/Home/Scene.tsx
@@ -4,8 +4,9 @@ import * as THREE from "three";
 import { earth, jupiter, mars, sun, venus } from "@/data/planets";
 import type { Planet } from "@/types/planet";
 
+const planets = [earth, jupiter, mars, sun, venus];
+
 export default function HomeScene() {
-	const planets = [earth, jupiter, mars, sun, venus];
 	const planet: Planet = planets[Math.floor(Math.random() * planets.length)];
 	const texture = useLoader(THREE.TextureLoader, planet.texturePath);
 	const planetRef = useRef<THREE.Mesh>(null);
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index 1218b48..22a68e1 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -21,11 +21,7 @@ export default function Page() {
 				<HomeScene />
 			</ThreeCanvas>
 
-			<div
-				className={
-					"absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-white"
-				}
-			>
+			<div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-white">
 				<h1
 					className="
 						text-7xl
@@ -56,7 +52,7 @@ export default function Page() {
 						active:scale-95
 					"
 				>
-					[Start Simulation]
+					Start Simulation
 				</button>
 			</div>
 		</div>