# イベントと座標 — Five SDK
シーンのタップを処理し、モデルとの交点を求め、ワールド座標のラベルを画面上に投影します。
Canonical: https://developer.realsee.ai/ja/docs/five-sdk/events-and-coordinates
Source: https://developer.realsee.ai/ja/docs/five-sdk/events-and-coordinates.md
Language: ja
撮影空間に独自 UI を置くためのタスクです。モデル上の点を選びます。画面クリックが常に有効な 3D 座標になるわけではありません。
## サンプルを実行する
[スターター](https://developer.realsee.ai/ja/docs/five-sdk/quickstart) の **SDK examples** で点選択を有効にし、見えるモデル表面を選んで座標を確認します。その点にラベルを置き、カメラを回して追従を確認します。
## モデル上の点を選択する
配置ツールが有効な間だけ購読します。コールバックは同じタップによる通常の視点移動を止めます。
```ts title="starters/react-five/src/recipes/pickPoint.ts"
import type { Five, Intersection } from "@realsee/five";
/** Opt in while a placement tool is active; the returned cleanup restores it. */
export function watchPickedPoint(
five: Five,
onPick: (hit: Intersection | null) => void
): () => void {
return five.on("gesture.tap", (event) => {
// Prevent this tool's tap from also triggering default point navigation.
event.preventDefault();
const hits = five.model.intersectRaycaster(event.center.raycaster);
onPick(hits[0] ?? null);
});
}
```
`null` はモデルとの交点がない状態です。空、透明部分、形状の欠落、読み込み中には交点が得られません。座標を捏造せず配置状態を消去してください。
## ラベルを画面に投影する
オーバーレイはキャンバスと同じ領域を覆います。位置の基準となる親、絶対配置のレイヤー、表示専用ラベルの `pointer-events: none` を使います。
```ts title="starters/react-five/src/recipes/placeLabel.ts"
import type { Five } from "@realsee/five";
import type { Vector3 } from "three";
/** Put overlay over the canvas, with the same dimensions and position. */
export function placeLabel(
five: Five,
overlay: HTMLElement,
position: Vector3,
text: string
): () => void {
const label = document.createElement("span");
label.textContent = text;
label.style.cssText =
"position:absolute;pointer-events:none;transform:translate(-50%,-100%);padding:6px 10px;border-radius:6px;background:#fff;color:#102f50";
overlay.append(label);
const update = () => {
const point = five.project2d(position, true);
label.hidden = point === null;
if (point) {
label.style.left = `${point.x}px`;
label.style.top = `${point.y}px`;
}
};
update();
const stop = five.on("render", update);
return () => {
stop();
label.remove();
};
}
```
信頼できない文字列には `textContent` を使います。終了時にラベルと描画リスナーを削除します。引数 `true` はモデル遮蔽テストを有効にし、各ラベルで交差計算が増えます。これは 2D UI であり、サーバーに保存した注釈ではありません。
編集可能なタグや高度な空間 UI は [Dnalogel パノラマタグ](https://developer.realsee.ai/ja/docs/dnalogel/panorama-tags) を参照してください。
## 結果を確認する
- 実際の表面では座標が得られ、交点がない場合は空のままです。
- 配置モードで別パノラマへの移動も同時発生しません。
- 回転・サイズ変更してもラベルが合います。
- 終了時に購読解除とラベル削除が行われます。
次は [画像キャプチャー](https://developer.realsee.ai/ja/docs/five-sdk/capture-images) へ進みます。