https://tech.ldas.jp/ja/tags/aframe/Recent content in A-Frame on デジタルアーカイブシステムの技術ブログHugojaTue, 31 Mar 2026 00:00:00 +0900https://tech.ldas.jp/ja/posts/iiif-vr-viewer-webxr/Tue, 31 Mar 2026 00:00:00 +0900https://tech.ldas.jp/ja/posts/iiif-vr-viewer-webxr/<h2 id="はじめに">はじめに</h2> <p>IIIF（International Image Interoperability Framework）で公開されている文化資源の画像を、<strong>原寸大</strong>で体験できたら面白いのではないか。そんな発想から、江戸時代の町家を再現した VR 空間に IIIF 画像を配置し、ブラウザや VR ヘッドセットで閲覧できるビューアを開発しました。</p> <p>技術スタックは <strong>A-Frame 1.5.0 + THREE.js 0.158.0 + WebXR</strong>。3D モデルは Sketchfab で公開されている <a href="https://sketchfab.com/3d-models/japanese-machiya-set-kit-d0bb3d915bf9448a9ef46bcb6a6fa6db">Japanese Machiya Set Kit</a> をベースに、部位ごとに分割して組み合わせています。</p> <p>この記事では「うまくいったこと」だけでなく、ハマった失敗とその原因・修正も正直に書きます。</p> <hr> <h2 id="プロジェクト概要">プロジェクト概要</h2> <div class="table-wrapper"> <table> <thead> <tr> <th>項目</th> <th>内容</th> </tr> </thead> <tbody> <tr> <td>レンダラー</td> <td>A-Frame 1.5.0 / THREE.js 0.158.0</td> </tr> <tr> <td>XR</td> <td>WebXR (VR ヘッドセット対応)</td> </tr> <tr> <td>画像規格</td> <td>IIIF Presentation API v3 / Image API v2</td> </tr> <tr> <td>3D モデル</td> <td>Sketchfab: Japanese Machiya Set Kit (GLB)</td> </tr> <tr> <td>アバター</td> <td>VRM + Mixamo リターゲット</td> </tr> <tr> <td>補助ライブラリ</td> <td>three-vrm v2, aframe-extras</td> </tr> <tr> <td>ツール</td> <td>gltf-transform, Blender CLI</td> </tr> </tbody> </table> </div> <h3 id="部屋の設計">部屋の設計</h3> <p>部屋のサイズは <strong>TAT_SZ = 1.76 m</strong>（江戸間の畳 1 枚の短辺）を基準単位にしています。畳・壁・障子・天井・提灯をパーツとしてタイル状に並べることで、IIIF 画像のサイズに応じて柔軟に部屋サイズを変更できる設計です。</p>