現在の描画フレームを出力します。対象はシーンのピクセルで、DOM ラベル、周囲の操作、ページ本体は別レイヤーです。
サンプルを実行する
スターター の SDK examples でシーンを待ち、キャプチャーを実行します。生成した PNG を取得し、現在の視点と比較します。
フレームを読み取って変換する
キャンバスが可視サイズになった後、明示的な操作から呼びます。補助関数は現在の寸法を取得し、flipY でピクセルを読み、PNG Blob に変換します。
import type { Five } from "@realsee/five";
import { Vector2 } from "three";
/** Call after load, from an explicit capture action, rather than each frame. */
export async function captureImage(five: Five): Promise<Blob> {
const size = five.getSize(new Vector2());
const width = Math.floor(size.x);
const height = Math.floor(size.y);
if (width < 1 || height < 1) throw new Error("The canvas has no visible size.");
const canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
const context = canvas.getContext("2d");
if (!context) throw new Error("Canvas 2D is unavailable.");
const image = context.createImageData(width, height);
five.getPixels({
x: 0,
y: 0,
width,
height,
pixelRatio: 1,
flipY: true,
buffer: image.data,
});
context.putImageData(image, 0, 0);
return new Promise((resolve, reject) => {
canvas.toBlob((blob) => {
if (blob) resolve(blob);
else reject(new Error("PNG encoding failed."));
}, "image/png");
});
}ダウンロード用の object URL は置換時やアンマウント時に revoke します。大きいフレームはピクセルバッファー、画像、変換結果のメモリーを使うため、出力サイズを制限してください。
結果を確認する
PNG の幅・高さが 0 でなく、現在の実シーンを含むことを確認します。空でない Blob だけでは不十分です。使用するモードとアセットの読み込み状態を確認してください。
これはブラウザー内の画像出力で、サーバーのスクリーンショットやパノラマ取得 API ではありません。非公開 Team シーンはアプリの認可・共有ルールに従ってください。
次は React ライフサイクル へ進みます。