ホーム画面を編集

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>
 	);

src/pages/Home/Scene.tsx

@@ -1,14 +1,29 @@
-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";
+
+const planets = [earth, jupiter, mars, sun, venus];
+
+export default function HomeScene() {
+	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>
 		</>
 	);

src/pages/Home/index.tsx

@@ -1,18 +1,60 @@
-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>
 	);
 }