IIIF 3D Viewer の使い方

章立て

1. 1

   イントロとトップページ

   IIIF 3D Viewer の概要とトップページ（3D 表示／アノテーション／IIIF 対応）

   読み上げ原稿

   • 0:01IIIF 3D Viewer

     IIIF 3D Viewer は、IIIF マニフェストに記述された 3D モデルを、ブラウザだけで表示・閲覧できるビューアです。

     
   • 0:083つの機能：3Dモデル表示 / アノテーション / IIIF対応

     トップページには 3 つの主な機能が並んでいます。3D モデルのインタラクティブな表示、モデル上へのアノテーション、そして IIIF マニフェスト形式への準拠です。

     
   • 0:16マニフェストの URL を入力するだけ

     使い方はシンプルです。3D モデルを含む IIIF マニフェストの URL を入力すると、ビューアが開いてモデルが表示されます。順番に見ていきましょう。

     
2. 2

   マニフェストから 3D モデルを表示

   マニフェストの URL 入力、またはサンプルから GLB モデルを読み込む

   読み上げ原稿

   • 0:01IIIF マニフェストの URL を入力

     トップページの入力欄に、3D モデルを含む IIIF マニフェストの URL を入力します。

     
   • 0:07サンプルマニフェストで試す

     ここでは、用意されているサンプルマニフェストを使います。菊池市立図書館が所蔵する、石淵家の地球儀の 3D モデルです。

     
   • 0:153Dモデルが表示されました

     ビューアが開き、3D モデルが読み込まれました。画面の大部分にモデル、右側に情報パネルが表示されます。

     
3. 3

   3D モデルの操作とメタデータ

   ドラッグで回転、ズーム、IIIF 標準のメタデータ表示

   読み上げ原稿

   • 0:02ドラッグで自由に回転

     3D モデルは、マウスでドラッグすると自由に回転できます。あらゆる角度から対象を観察できます。

     
   • 0:21ズームボタンで拡大・縮小

     右上のプラス・マイナスのボタン、またはマウスホイールで、拡大・縮小ができます。細部までじっくり確認できます。

     
   • 0:31メタデータパネル

     右側のパネルには、マニフェストに記述されたメタデータが表示されます。タイトル、説明、帰属表示、権利情報などを、IIIF の標準的な形式で確認できます。

     
4. 4

   アノテーション

   3D モデル上の番号付きマーカー、一覧、カードクリックでカメラ移動

   読み上げ原稿

   • 0:01モデル上のアノテーションマーカー

     アノテーションが付いたマニフェストを開くと、3D モデル上の特定の位置に、番号付きのマーカーが表示されます。

     
   • 0:15アノテーション一覧

     右側のアノテーションタブには、付与されたアノテーションが一覧で表示されます。このサンプルには 3 件のコメントが含まれています。

     
   • 0:24カードをクリックして注目

     一覧のカードをクリックすると、対応するマーカーへカメラがなめらかに移動し、その位置に注目できます。

     
   • 0:32位置とコメントを関連付けて管理

     このように、3D モデル上の位置と、説明やコメントを関連付けて管理できます。アノテーションは標準の Web アノテーション形式で記述されています。

     
5. 5

   地図連携ビューア（GeoRef）

   地図（MapLibre）と 3D モデルの左右分割、ジオ参照アノテーション

   読み上げ原稿

   • 0:04地図連携ビューア

     もう一つの機能が、地図連携ビューアです。地図と 3D モデルを左右に並べて表示します。

     
   • 0:09地図上の位置と3Dモデルを対応づけ

     地球儀のような資料では、モデル上に描かれた地名と、現実の地理座標を対応づけられます。地図側のマーカーが、ジオ参照アノテーションを表します。

     
   • 0:25右パネルでアノテーションを検索・一覧

     右側のパネルでは、アノテーションの一覧表示や、キーワードによる検索ができます。地図と 3D モデルを行き来しながら、資料を読み解けます。

     
6. 6

   言語切替とダークモード

   日本語⇄English の切替、ライト⇄ダークのテーマトグル

   読み上げ原稿

   • 0:01日本語 / 英語の切替

     ヘッダー右側のボタンで、表示言語を切り替えられます。

     
   • 0:07English：英語表示

     ボタンを押すと、画面全体が英語表示に切り替わります。もう一度押せば日本語に戻ります。

     
   • 0:14ダークモード切替

     隣のアイコンボタンでは、ライトモードとダークモードを切り替えられます。

     
   • 0:20ダークモード

     ダークモードでは、3D モデルの背景も含めて、画面全体が目にやさしい暗い配色になります。設定はブラウザに記憶されます。

     
7. 7

   まとめと参考リンク

   IIIF 3D 拡張仕様・サンプルマニフェスト・ソースへのリンク

   読み上げ原稿

   • 0:01まとめ

     IIIF 3D Viewer は、IIIF マニフェストに基づく 3D モデルの表示・アノテーション・地図連携を、ブラウザだけで完結できるビューアです。

     
   • 0:08参考リンク：IIIF 3D の仕様と記事

     参考リンクのページには、ビューアの開発で参照した、IIIF 3D 拡張の仕様や技術記事、サンプルマニフェストへのリンクがまとめられています。

     
   • 0:15github.com/nakamura196/iiif-3d-viewer

     ソースコードは MIT ライセンスで公開されています。詳細は概要欄のリンクをご覧ください。ぜひお試しください。