feat: 最初の衝突までの軌道を予測する線を追加

src/gamescene/components/Ball.tsx

@@ -131,7 +131,7 @@ export function Ball({
 
 			api.applyImpulse(
 				[direction.x * power, 0.0, direction.z * power],
-				[ballPosition.x, ballPosition.y, ballPosition.z], // 力を加える位置（ボールの中心）
+				[0, 0, 0], // ボール中心（相対座標）に力を加える
 			);
 
 			return true;

src/gamescene/components/PowerGauge.tsx

@@ -11,7 +11,7 @@ export function PowerGauge({
 	onConfirm,
 	onCancel,
 	minForce = 1.0,
-	maxForce = 5.0,
+	maxForce = 10.0,
 }: PowerGaugeProps) {
 	const [power, setPower] = useState(0);
 	const animationRef = useRef<number>(0);

src/gamescene/components/TrajectoryLineRaycast.tsx

@@ -0,0 +1,173 @@
+import { useFrame } from "@react-three/fiber";
+import { useMemo, useRef } from "react";
+import * as THREE from "three";
+import { BALL_RADIUS } from "../constants/physics";
+
+const DOT_Y = 0.05;
+const MAX_DISTANCE = 100;
+const COLLISION_RADIUS = BALL_RADIUS * 2;
+const DOT_SPACING = 0.08;
+const DOT_SIZE = 3;
+const MAX_DOTS = 128;
+const DOT_START_OFFSET = BALL_RADIUS * 1.5;
+
+/**
+ * レイ(origin, direction)と円(center, radius)の交差判定。
+ * 交差する場合、最初の交差点までの距離tを返す。交差しない場合はnullを返す。
+ */
+function rayCircleIntersect(
+	ox: number,
+	oz: number,
+	dx: number,
+	dz: number,
+	cx: number,
+	cz: number,
+	r: number,
+): number | null {
+	const lx = cx - ox;
+	const lz = cz - oz;
+	const tca = lx * dx + lz * dz;
+	if (tca < 0) return null;
+
+	const d2 = lx * lx + lz * lz - tca * tca;
+	const r2 = r * r;
+	if (d2 > r2) return null;
+
+	const thc = Math.sqrt(r2 - d2);
+	const t = tca - thc;
+	return t > 1e-6 ? t : null;
+}
+
+type TrajectoryLineRaycastProps = {
+	ballPositionRef: React.RefObject<Record<string, [number, number, number]>>;
+	cueBallId: string;
+	visibleBallIds: string[];
+	visible: boolean;
+};
+
+export function TrajectoryLineRaycast({
+	ballPositionRef,
+	cueBallId,
+	visibleBallIds,
+	visible,
+}: TrajectoryLineRaycastProps) {
+	const pointsRef = useRef<THREE.Points>(null);
+	const raycaster = useMemo(() => new THREE.Raycaster(), []);
+	const workDirection = useMemo(() => new THREE.Vector3(), []);
+	const workOrigin = useMemo(() => new THREE.Vector3(), []);
+
+	const pointsObject = useMemo(() => {
+		const geom = new THREE.BufferGeometry();
+		const positions = new Float32Array(MAX_DOTS * 3);
+		geom.setAttribute("position", new THREE.BufferAttribute(positions, 3));
+		geom.setDrawRange(0, 0);
+		const mat = new THREE.PointsMaterial({
+			color: 0xffffff,
+			size: DOT_SIZE,
+			sizeAttenuation: false,
+			transparent: true,
+			opacity: 0.9,
+		});
+		const points = new THREE.Points(geom, mat);
+		points.raycast = () => {};
+		return points;
+	}, []);
+
+	useFrame(({ camera, scene }) => {
+		const points = pointsRef.current;
+		if (!points) return;
+
+		if (!visible) {
+			points.visible = false;
+			return;
+		}
+
+		const ballPos = ballPositionRef.current?.[cueBallId];
+		if (!ballPos) {
+			points.visible = false;
+			return;
+		}
+
+		const dirX = ballPos[0] - camera.position.x;
+		const dirZ = ballPos[2] - camera.position.z;
+		const len = Math.sqrt(dirX * dirX + dirZ * dirZ);
+		if (len < 1e-6) {
+			points.visible = false;
+			return;
+		}
+
+		const dx = dirX / len;
+		const dz = dirZ / len;
+		workDirection.set(dx, 0, dz);
+		workOrigin.set(ballPos[0], ballPos[1], ballPos[2]);
+
+		let minDist = MAX_DISTANCE;
+
+		// 1. 壁・クッション・障害物はレイキャストで検出
+		//    ヒット距離からBALL_RADIUSを引いて、キュー球の半径分を補正
+		raycaster.set(workOrigin, workDirection);
+		raycaster.far = MAX_DISTANCE;
+
+		// 距離昇順でソート済み（Three.js仕様）の結果から、
+		// ボール（SphereGeometry）をスキップして最初の壁・障害物を探す
+		const intersects = raycaster.intersectObjects(scene.children, true);
+		for (const hit of intersects) {
+			if (hit.object.name === cueBallId) continue;
+			if (
+				hit.object instanceof THREE.Mesh &&
+				hit.object.geometry instanceof THREE.SphereGeometry
+			) {
+				continue;
+			}
+			const adjusted = hit.distance - BALL_RADIUS;
+			if (adjusted > 0 && adjusted < minDist) {
+				minDist = adjusted;
+			}
+			break;
+		}
+
+		// 2. ボール同士の衝突はballPositionRefから直接判定
+		for (const id of visibleBallIds) {
+			if (id === cueBallId) continue;
+			const pos = ballPositionRef.current?.[id];
+			if (!pos) continue;
+
+			const t = rayCircleIntersect(
+				workOrigin.x,
+				workOrigin.z,
+				dx,
+				dz,
+				pos[0],
+				pos[2],
+				COLLISION_RADIUS,
+			);
+			if (t !== null && t < minDist) {
+				minDist = t;
+			}
+		}
+
+		// キュー球から衝突点まで等間隔にドットを配置
+		const geom = pointsObject.geometry;
+		const attr = geom.getAttribute("position");
+		const arr = attr.array;
+
+		let dotCount = 0;
+		for (
+			let d = DOT_START_OFFSET;
+			d < minDist && dotCount < MAX_DOTS;
+			d += DOT_SPACING
+		) {
+			const idx = dotCount * 3;
+			arr[idx] = ballPos[0] + dx * d;
+			arr[idx + 1] = DOT_Y;
+			arr[idx + 2] = ballPos[2] + dz * d;
+			dotCount++;
+		}
+
+		attr.needsUpdate = true;
+		geom.setDrawRange(0, dotCount);
+		points.visible = true;
+	});
+
+	return <primitive object={pointsObject} ref={pointsRef} />;
+}

src/gamescene/index.tsx

@@ -16,6 +16,7 @@ import { BilliardTable } from "./components/billiardTable";
 import { CameraController } from "./components/CameraController";
 import { PowerGauge } from "./components/PowerGauge";
 import { StartBanner } from "./components/StartBanner";
+import { TrajectoryLineRaycast } from "./components/TrajectoryLineRaycast";
 import { getLevelConfig } from "./constants/levels";
 import { findCueRespawnPosition } from "./utils/cueRespawn";
 
@@ -326,6 +327,14 @@ export default function GameScene() {
 					<Environment files={billiardHallHdr} background />
 				</Suspense>
 				<CameraController isCharging={isCharging} />
+				<TrajectoryLineRaycast
+					ballPositionRef={ballPositionsRef}
+					cueBallId={cueBallId}
+					visibleBallIds={balls
+						.filter((b) => b.id !== cueBallId && ballStates[b.id]?.visible)
+						.map((b) => b.id)}
+					visible={!anyBallMoving && (ballStates[cueBallId]?.visible ?? false)}
+				/>
 			</Canvas>
 			{showRoundStart && (
 				<StartBanner