refactor(simulation): remove remaining useRef hooks

Author: tknkaa

src/pages/Simulation/components/CameraController.tsx

@@ -7,13 +7,13 @@ import type { PlanetRegistry } from "../core/PlanetRegistry";
 type CameraControllerProps = {
 	followedPlanetId: string | null;
 	planetRegistry: PlanetRegistry;
-	orbitControlsRef: React.MutableRefObject<OrbitControls | null>;
+	orbitControls: OrbitControls | null;
 };
 
 export function CameraController({
 	followedPlanetId,
 	planetRegistry,
-	orbitControlsRef,
+	orbitControls,
 }: CameraControllerProps) {
 	const { camera } = useThree();
 	const followController = useMemo(() => new CameraFollowController(), []);
@@ -27,7 +27,7 @@ export function CameraController({
 			followedPlanetId,
 			planetRegistry,
 			camera,
-			controls: orbitControlsRef.current,
+			controls: orbitControls,
 		});
 	});
 	return null;

src/pages/Simulation/components/Explosion.tsx

@@ -1,5 +1,5 @@
 import { useFrame } from "@react-three/fiber";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import * as THREE from "three";
 import type { ExplosionData } from "@/types/Explosion";
 
@@ -17,7 +17,6 @@ type ExplosionProps = {
 };
 
 export function Explosion({ explosion, onComplete }: ExplosionProps) {
-	const groupRef = useRef<THREE.Group | null>(null);
 	const [fragments, setFragments] = useState<Fragment[]>([]);
 
 	// 爆発初期化
@@ -118,7 +117,7 @@ export function Explosion({ explosion, onComplete }: ExplosionProps) {
 	});
 
 	return (
-		<group ref={groupRef}>
+		<group>
 			{fragments.map((f) => (
 				<primitive key={f.id} object={f.mesh} />
 			))}

src/pages/Simulation/components/PlanetMesh.tsx

@@ -1,11 +1,11 @@
 import { useSphere } from "@react-three/cannon";
 import { Trail, useTexture } from "@react-three/drei";
 import { useFrame } from "@react-three/fiber";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo } from "react";
 import * as THREE from "three";
 import type { Planet } from "@/types/planet";
 import { GravitySystem } from "../core/GravitySystem";
-import type { PlanetRegistry } from "../core/PlanetRegistry";
+import type { PlanetRegistry, PositionRef } from "../core/PlanetRegistry";
 
 type PlanetMeshProps = {
 	planet: Planet;
@@ -20,45 +20,42 @@ export function PlanetMesh({
 	onExplosion,
 	onSelect,
 }: PlanetMeshProps) {
-	const [ref, api] = useSphere<THREE.Mesh>(
-		() => ({
-			mass: planet.mass,
-			args: [planet.radius],
-			position: [planet.position.x, planet.position.y, planet.position.z],
-			velocity: [planet.velocity.x, planet.velocity.y, planet.velocity.z],
-			angularVelocity: [0, planet.rotationSpeedY, 0], // 物理エンジンでY軸周りの角速度を設定
-			linearDamping: 0, // 宇宙空間なので抵抗なし
-			angularDamping: 0, // 宇宙空間なので回転の減衰もない
-			onCollide: (e) => {
-				// 衝突時の衝撃が一定以上なら爆発とみなす
-				if (e.contact.impactVelocity > 0.5) {
-					const contactPoint = new THREE.Vector3(
-						e.contact.contactPoint[0],
-						e.contact.contactPoint[1],
-						e.contact.contactPoint[2],
-					);
-					onExplosion(contactPoint, planet.radius);
-				}
-			},
-		}),
-		useRef<THREE.Mesh>(null),
-	);
+	const [ref, api] = useSphere<THREE.Mesh>(() => ({
+		mass: planet.mass,
+		args: [planet.radius],
+		position: [planet.position.x, planet.position.y, planet.position.z],
+		velocity: [planet.velocity.x, planet.velocity.y, planet.velocity.z],
+		angularVelocity: [0, planet.rotationSpeedY, 0], // 物理エンジンでY軸周りの角速度を設定
+		linearDamping: 0, // 宇宙空間なので抵抗なし
+		angularDamping: 0, // 宇宙空間なので回転の減衰もない
+		onCollide: (e) => {
+			// 衝突時の衝撃が一定以上なら爆発とみなす
+			if (e.contact.impactVelocity > 0.5) {
+				const contactPoint = new THREE.Vector3(
+					e.contact.contactPoint[0],
+					e.contact.contactPoint[1],
+					e.contact.contactPoint[2],
+				);
+				onExplosion(contactPoint, planet.radius);
+			}
+		},
+	}));
 
 	// Load the texture (you can use any public Earth texture URL)
 	const [colorMap] = useTexture([planet.texturePath]);
 
-	// 物理エンジンの位置を追跡するためのref
-	const position = useRef([
-		planet.position.x,
-		planet.position.y,
-		planet.position.z,
-	]);
+	const position = useMemo<PositionRef>(
+		() => ({
+			current: [planet.position.x, planet.position.y, planet.position.z],
+		}),
+		[planet.position.x, planet.position.y, planet.position.z],
+	);
 	useEffect(() => {
 		const unsubscribe = api.position.subscribe((v) => {
 			position.current = v;
 		});
 		return () => unsubscribe(); // アンマウント時に購読解除
-	}, [api.position]);
+	}, [api.position, position]);
 
 	// マウント時に自分のMeshをレジストリに登録し、他の惑星から参照できるようにする
 	useEffect(() => {
@@ -77,7 +74,7 @@ export function PlanetMesh({
 		return () => {
 			planetRegistry.unregister(planet.id);
 		};
-	}, [planet.id, planetRegistry, planet.mass, planet.radius, ref]);
+	}, [planet.id, planetRegistry, planet.mass, planet.radius, ref, position]);
 
 	// 計算用ベクトルをメモリに保持しておく（毎フレームnewしないため）
 	const gravitySystem = useMemo(() => new GravitySystem(), []);

src/pages/Simulation/index.tsx

@@ -2,7 +2,7 @@ import { Physics } from "@react-three/cannon";
 import { OrbitControls, Stars, useTexture } from "@react-three/drei";
 import { Canvas } from "@react-three/fiber";
 import { button, useControls } from "leva";
-import { Suspense, useMemo, useRef, useState } from "react";
+import { Suspense, useMemo, useState } from "react";
 import type { OrbitControls as Controls } from "three-stdlib";
 import { earth, jupiter, mars, sun, venus } from "@/data/planets";
 import { CameraController } from "./components/CameraController";
@@ -27,7 +27,7 @@ useTexture.preload(planetTexturePaths);
 const planetTemplates = { earth, sun, mars, jupiter, venus } as const;
 
 export default function Page() {
-	const orbitControlsRef = useRef<Controls | null>(null);
+	const [orbitControls, setOrbitControls] = useState<Controls | null>(null);
 	const planetRegistry = useMemo(() => new PlanetRegistry(), []);
 	const simulationWorld = useMemo(() => new SimulationWorld([earth]), []);
 
@@ -100,10 +100,10 @@ export default function Page() {
 		showAxes: true,
 		showPreview: true,
 		resetCameraPosition: button(() => {
-			if (orbitControlsRef.current) {
-				orbitControlsRef.current.reset();
-				orbitControlsRef.current.target.set(0, 0, 0);
-				orbitControlsRef.current.update();
+			if (orbitControls) {
+				orbitControls.reset();
+				orbitControls.target.set(0, 0, 0);
+				orbitControls.update();
 			}
 		}),
 	});
@@ -150,7 +150,7 @@ export default function Page() {
 				<CameraController
 					followedPlanetId={worldState.followedPlanetId}
 					planetRegistry={planetRegistry}
-					orbitControlsRef={orbitControlsRef}
+					orbitControls={orbitControls}
 				/>
 
 				<Physics gravity={[0, 0, 0]}>
@@ -205,7 +205,7 @@ export default function Page() {
 					fade
 					speed={1}
 				/>
-				<OrbitControls ref={orbitControlsRef} enableZoom={true} />
+				<OrbitControls ref={setOrbitControls} enableZoom={true} />
 			</Canvas>
 			<div className="absolute left-4 top-4 w-80 max-h-[75vh] overflow-y-auto rounded-lg bg-black/70 p-3 text-sm text-white backdrop-blur-sm">
 				<div className="flex items-center justify-between">