add: aim target render layer

claustra01 · Aug 11, 2024 · 68fbe49 · 68fbe49
1 parent 6d1f30e
commit 68fbe49
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 27 deletions.
diff --git a/src/pages/yatai/index.module.css b/src/pages/yatai/index.module.css
@@ -1,7 +1,22 @@
-.canvas {
+.container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.target {
+  position: absolute;
+  z-index: 1;
+  width: 50px;
+  height: 50px;
 }
diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
@@ -43,7 +43,7 @@ function Yatai() {
 	const [target, setTarget] = useState<Target | undefined>(undefined);
 	const shotTarget = (data: ActionSchema) => {
 		setTarget(data.target);
-	}
+	};
 
 	// 土台
 	const Foundation = (props: ThreeElements["mesh"]) => {
@@ -121,31 +121,48 @@ function Yatai() {
 	};
 
 	return (
-		<div className={styles.canvas}>
-			<Canvas shadows camera={{ fov: 25 }}>
-				<Physics>
-					{/* 全体ライト */}
-					<ambientLight intensity={Math.PI / 16} />
-					{/* スポットライト */}
-					<spotLight
-						castShadow
-						position={[4, 12, 8]}
-						angle={0.5}
-						penumbra={0}
-						decay={0}
-						intensity={Math.PI}
-						shadow-mapSize-width={1024}
-						shadow-mapSize-height={1024}
-						shadow-bias={-0.0001}
-					/>
-					<CameraController />
-					<Foundation position={[0, 2, -2]} />
-					<Foundation position={[0, 0, 0]} />
-					<Target position={[-3, 1.8, 0]} />
-					<Target position={[0, 1.8, 0]} />
-					<Target position={[3, 1.8, 0]} />
-				</Physics>
-			</Canvas>
+		<div className={styles.container}>
+			<div className={styles.canvas}>
+				<Canvas shadows camera={{ fov: 25 }}>
+					<Physics>
+						{/* 全体ライト */}
+						<ambientLight intensity={Math.PI / 16} />
+						{/* スポットライト */}
+						<spotLight
+							castShadow
+							position={[4, 12, 8]}
+							angle={0.5}
+							penumbra={0}
+							decay={0}
+							intensity={Math.PI}
+							shadow-mapSize-width={1024}
+							shadow-mapSize-height={1024}
+							shadow-bias={-0.0001}
+						/>
+						<CameraController />
+						<Foundation position={[0, 2, -2]} />
+						<Foundation position={[0, 0, 0]} />
+						<Target position={[-3, 1.8, 0]} />
+						<Target position={[0, 1.8, 0]} />
+						<Target position={[3, 1.8, 0]} />
+					</Physics>
+				</Canvas>
+			</div>
+			<div
+				className={styles.target}
+				style={{
+					left: `${aim?.x}px`,
+					top: `${aim?.y}px`,
+					transform: "translate(-50%, -50%)", // 中心を基準に配置
+				}}
+			>
+				<img
+					src="/2D_material/target.webp"
+					alt="照準の表示"
+					width="100"
+					height="100"
+				/>
+			</div>
 		</div>
 	);
 }