用語解説

• Gatsby.js -> Reactで作られた静的サイトジェネレーター
• A-Frame -> Three.jsベースでVRコンテンツを簡単に作れるJavascriptフレームワーク
• SSG -> 静的サイトジェネレータ(Static Site Generator)

手順

1. Gatsbyを導入

この辺(https://qiita.com/ekzemplaro/items/4ac6f88ece6179e7ffdd)を参考に導入する

2. A-Frameを導入

aframe-reactというライブラリもあるが、5年くらい前から更新が止まっており最新のGatsbyでは動かないため使えない。

npm i aframe

で生のA-Frameを使っていく。

3. A-Frameを使った3Dモデルを配置

なんでもいいのでここ(https://free3d.com/3d-models/architecture) あたりから適当なgltfファイルをダウンロードしてきて、index.jsに以下追加する

<a-scene>
  <a-entity
    gltf-model="src: url(<FILE_NAME>.gltf);"
    orbit-controls="target: 0 1.6 -0.5; maxPolarAngle:180; minDistance: 0.5; maxDistance: 200; initialPosition: 0 0 30"
    model-loader
  ></a-entity>
  <a-sky color="#afeeee"></a-sky>
</a-scene>

4. ローカル環境で確認

gatsby develop

で確認してみると、無事モデルを描画できているはず。

続く。