update: threejs component use memo

claustra01 · Aug 11, 2024 · 329351f · 329351f
1 parent 1fe8ccc
commit 329351f
Showing 1 changed file with 71 additions and 62 deletions.
diff --git a/src/pages/yatai/index.tsx b/src/pages/yatai/index.tsx
@@ -16,41 +16,10 @@ import {
 	type Target,
 } from "../../type/shooting";
 import styles from "./index.module.css";
+import React from "react";
 
-function Yatai() {
-	const socketRef = useSocketRefStore((state) => state.socketRef);
-
-	useEffect(() => {
-		const onMessage = (event: MessageEvent) => {
-			const data = JSON.parse(event.data);
-			// サーバーから受け取ったデータを使った処理
-			if (data.message_type === MessageType.Pointer) {
-				aimTarget(data);
-			}
-			if (data.message_type === MessageType.Action) {
-				// shotTarget(data);
-			}
-		};
-		const currentSocketRef = socketRef?.current;
-		currentSocketRef?.addEventListener("message", onMessage);
-		return () => {
-			currentSocketRef?.removeEventListener("message", onMessage);
-		};
-	}, [socketRef]);
-
-	// TODO: これらは一人用,いつかマルチプレイヤー対応する
-	const [aim, setAim] = useState<Target | undefined>(undefined);
-	const aimTarget = (data: PointerSchema) => {
-		const x = (window.innerWidth / 2) * data.target.x - window.innerWidth / 2;
-		const y = (window.innerHeight / 2) * data.target.y - window.innerHeight / 2;
-		setAim({ x, y });
-	};
-
-	// const [target, setTarget] = useState<Target | undefined>(undefined);
-	// const shotTarget = (data: ActionSchema) => {
-	// 	setTarget(data.target);
-	// };
 
+const YataiStage = React.memo(() => {
 	// 土台
 	const Foundation = (props: ThreeElements["mesh"]) => {
 		const args: [number, number, number] = [10, 2, 2];
@@ -126,47 +95,87 @@ function Yatai() {
 		return null;
 	};
 
+	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>
+	);
+});
+
+
+function Yatai() {
+	const socketRef = useSocketRefStore((state) => state.socketRef);
+
+	useEffect(() => {
+		const onMessage = (event: MessageEvent) => {
+			const data = JSON.parse(event.data);
+			// サーバーから受け取ったデータを使った処理
+			if (data.message_type === MessageType.Pointer) {
+				aimTarget(data);
+			}
+			if (data.message_type === MessageType.Action) {
+				// shotTarget(data);
+			}
+		};
+		const currentSocketRef = socketRef?.current;
+		currentSocketRef?.addEventListener("message", onMessage);
+		return () => {
+			currentSocketRef?.removeEventListener("message", onMessage);
+		};
+	}, [socketRef]);
+
+	// TODO: これらは一人用,いつかマルチプレイヤー対応する
+	const [aim, setAim] = useState<Target | undefined>(undefined);
+	const aimTarget = (data: PointerSchema) => {
+		const x = (window.innerWidth / 2) * data.target.x + window.innerWidth / 2;
+		const y = (window.innerHeight / 2) * data.target.y + window.innerHeight / 2;
+		setAim({ x, y });
+	};
+
+	// const [target, setTarget] = useState<Target | undefined>(undefined);
+	// const shotTarget = (data: ActionSchema) => {
+	// 	setTarget(data.target);
+	// };
+
 	return (
 		<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>
+			<YataiStage />
 			<div
 				className={styles.target}
 				style={{
 					left: `${aim?.x}px`,
 					top: `${aim?.y}px`,
-					transform: "translate(-50%, -50%)", // 中心を基準に配置
+					transform: "translate(-50%, -50%)",
 				}}
 			>
 				<img
 					src="/2D_material/target.webp"
 					alt="照準の表示"
-					width="100"
-					height="100"
+					width="100%"
+					height="100%"
 				/>
 			</div>
 		</div>