以下の記事で、Aleph 3D viewerを紹介しました。
その後調べた結果、以下のリポジトリの存在も知りました。
https://github.com/aleph-viewer/aleph-r3f
以下のように説明されており、react-three-fiberとshadcn/uiを使用している点に違いがあるようでした。
Aleph is a 3D object viewer and annotation/measurement tool built with react-three-fiber and shadcn/ui
以下のように、アノテーション付与機能なども改良されているようでした。
今回の記事でも、菊池市デジタルアーカイブで公開されている「石淵家地球儀」の3Dデータを使用します。
https://adeac.jp/kikuchi-city/catalog/e0001
使い方#
以下で閲覧いただけます。
https://iiif-aleph-r3f.vercel.app/
アノテーションタブで、アノテーションの付与を行うことができました。
アノテーションデータのインポート/エクスポートを行うことができ、JSON形式でのエクスポート結果は以下でした。
カスタマイズ#
「石淵家地球儀」を表示するにあたり、以下のようにソースコードを編集する必要がありました。
また、Vercelへのデプロイにあたり、以下のように、tailwind.config.jsを修正する必要がありました。
GPTによる以下の回答を参考にしました。
このエラーは、tailwind.config.jsファイルがECMAScriptモジュール（ESM）として扱われており、そのためにmodule.exportsが定義されていないことを示しています。これは、ESMがデフォルトまたは強制されている環境（例えば、ViteやVercelの一部の設定）でよく発生します。
まとめ#
今後、IIIFマニフェストファイルの参照などのカスタマイズにも試みたいと思います。