🌿
🌿 MidoriPhotoArt.
HTMLコンテンツを3D空間に表示。インタラクションの実装　ボタンのクリック操作。汎用的な仕様。マウスのクリック操作の実装。WEBGL用のHTML表示は、映像の出力、HTMLコンテンツ、表示、いろいろと自前で作るので、ある程度ひな型となるオードを模索。まず、CSSのアニメーションは、仕様上利用不可。その代わりに、プログラムコードを埋め込んで、HTMLを操作できるので、HTMLのアニメーションもCSS利用しないで実装可能。

CalendarDisplay UI システム仕様書

1. システム概要

本システムは、Three.js と OffscreenCanvas を活用し、動的に生成されるカレンダーUIを3D空間に表示するコンポーネント「CalendarDisplay」を提供します。主要な機能としては、複数のテーマによるデザイン切替、現在年月に基づくカレンダーHTMLの自動生成、SVG テンプレートによるレンダリング、そしてインタラクティブなクリック操作によるユーザー操作が含まれます。

2. コアコンポーネントの設計

CalendarDisplay クラスは、以下の主要要素から構成されます。

  • OffscreenCanvas を利用した描画用キャンバス
  • 内部状況を反映する THREE.js の CanvasTexture と Mesh による 3D 表示
  • SVG_TEMPLATE 関数を用いた SVG テンプレートの生成
  • 現在の日付情報を用いたカレンダーHTMLテーブルの作成（_generateCalendarHTML メソッド）
  • 複数のデザインテーマ（CSS スタイル）の保持と循環切替
  • インタラクション処理（attachInteraction 内でのクリックイベントの設定）

主なメソッド一覧


// CalendarDisplay クラスのコンストラクタ
constructor(width = 1920, height = 1080)

// カレンダー表示用 HTML テーブルの生成
_generateCalendarHTML()

// 現在年月のデータ取得
_getCurrentCalendarData()

// SVG テンプレートの生成 (SVG_TEMPLATE を利用)
_generateRawSVG()

// Canvas に対するカレンダー更新処理
_updateCalendar()

// アニメーションループによる更新 (_animate)
_animate()

// コンポーネントの開始処理 (start)
start(camera, domElement)

// THREE.js Mesh の作成
_createMesh()

// Mesh の取得 (getMesh)
getMesh()

// 更新処理 (update)
update()

// ユーザインタラクションの設定 (attachInteraction)
attachInteraction(camera, domElement)

// テーマ切替ボタンのクリック処理
handleButton3Click()

// インタラクティブ領域の再計算
updateInteractiveElements()

3. インタラクティブ機能と更新処理

CalendarDisplay は、ユーザー操作によりカレンダー表示のテーマを切り替えるインタラクティブな仕組みを持ちます。DOM イベントを Three.js の Raycaster で補足し、SVG 内のボタン（例: id="btn3"）を検出して handleButton3Click() を呼び出す仕組みです。また、定期的に update() が実行され、最新のカレンダー情報に基づいて Canvas テクスチャが更新されます。

4. UML クラス図

以下は、CalendarDisplay クラスおよび関連クラスの詳細な UML クラス図です。各クラスの属性、プライベートメソッド、パブリックメソッドが網羅的に定義されています。

CalendarDisplay - width: number - height: number - canvas: OffscreenCanvas - context: CanvasRenderingContext2D - mesh: THREE.Mesh - themeIndex: number - themes: string[] - commonStyles: string - _generateCalendarHTML(): void - _getCurrentCalendarData(): any - _generateRawSVG(): string - _updateCalendar(): void - _animate(): void + start(camera, domElement): Promise<void> + update(): Promise<void> + getMesh(): THREE.Mesh + attachInteraction(camera, domElement): void + handleButton3Click(): void

また、インタラクティブな UI 操作の管理には、以下の補助クラスが用いられ、各要素の状態管理やイベント処理が詳細に定義されています。

InteractiveElement - x: number - y: number - width: number - height: number - callback: function + contains(pointX, pointY): boolean + triggerEvent(): void

5. 動作フローと実装上の留意点

  • start() により CalendarDisplay が初期化され、OffscreenCanvas 上に描画した結果が THREE.CanvasTexture として Mesh に変換され、3D シーンに配置されます。
  • _animate() 内で定期的に _updateCalendar() を呼び出し、SVG テンプレートから生成された最新のカレンダー内容を描画します。
  • attachInteraction() により、DOM のクリックイベントが Three.js の Raycaster を通して検出され、対象のインタラクティブ領域（ボタン）が判定されます。
  • handleButton3Click() により、テーマが循環的に切替えられ、updateInteractiveElements() でボタン領域の再計算が行われます。
  • 効率的な描画とリソース管理のため、OffscreenCanvas の再利用およびテクスチャの最適化が実装されています。