initializeInteractiveCanvas フロー

midori241の時計はクラス化される前段階なので、OffscreenCanvas生成・動画再生・SVG描画・メッシュ生成をひとまとめにしたPromiseを返す。このPromiseが解決すると、そのままThree.jsのPlaneGeometryが返る。

1. OffscreenCanvasを作成

1920×1080のCanvasを確保し、background動画を読み込む。interactiveCanvasはシングルトン扱いで、二度目以降はそのまま再利用する。

2. video.onloadeddata を待機

Promiseの中で video.play() を呼び、再生に成功したタイミングで animate() を呼び出し、毎フレーム OffscreenCanvas を更新する。

3. CanvasTextureを構築

createInteractivePlane() が CanvasTexture と PlaneGeometry を組み合わせ、中間メッシュを返す。texture.needsUpdate は animate 内で自動的に更新される。

4. scene.add(mesh)

Promiseが解決した後で scene.add(interactiveUI) が呼ばれ、1 枚の HUD メッシュとして表示される。

初期ロードの平均待機時間は 1.8 秒。Safari では video.play() が失敗することがあり、その場合は Promise が reject されてコンソールにエラーが出たまま止まる。この挙動が midori242 でクラス化される動機になった。