↑こちらの動画ですが、

「Webサイトに3Dモデル（一人がけチェアの3Dモデル）が読み込まれて」
「それがユーザーのページスクロールに反応して回転する」

ということを実現している内容になります。今後何回かに分けて、この挙動を実現する記事を書きたいと思っています。

まず今回はその第1回目として、「Webサイトに3Dモデルを表示する」という事について、書いていきます。

手順は大きく分けて3つ

「Webサイトに3Dモデルを表示する」には、次の手順が必要です。

1. 3Dモデルを用意する
2. JSライブラリの読み込み(これは1行)
3. HTMLとCSSを書く（記事内のセクションとしては 3-1. と 3-2. にわけました）

順を追って、次のセクションより説明します。

手順1. 3Dモデルを用意する

「Webサイトに3Dモデルを表示する」には、まず前提として
「表示させたい3Dモデルそのもの」が必要です。

これを用意するためには

・フリーの3Dモデル配布サイトを利用
・自分でつくる

上記の2通りが考えられます。前者は適したサイトを見つけられれば良いです。しっかりライセンスを確認の上、問題ない素材を入手する必要があります。
前者を選ぶ場合、それらしいワードで検索するといくつかヒットしますが、ここでは割愛します。

今回は、記事を書くということもあり、せっかくなので後者をえらびました。

後者の場合、
Adobe Creative Cloudコンプリートプランを契約していて、
簡単に3Dモデルを用意するなら、「Adobe Dimension」を使用するのがおすすめです。今回はこの方法で、キャプチャにあるような椅子の3Dモデルを用意しました。

椅子でなくてもいいですが、「Adobe Dimension」には手っ取り早く3Dモデルを用意できるように、プリセットが用意されています。
モックアップとしてはこれで充分なので、次の手順で3Dモデルを書き出しました。

・なんらかのプリセットの3Dモデルを左メニューから選び、配置する
・それを選択した状態で、画面上部のメニューから[ファイル] > [書き出し] > [シーン/オブジェクト]を選ぶ
・開いたダイアログで「選択したオブジェクト」のラジオボタンを選ぶ
・「書き出し時にモデルを中央揃え」のチェックボックスをオンにする
・拡張子は「.glb形式」で書き出す

↑これを行なって、保存しておきます。（次のキャプチャを参照）

もちろん、3D制作の知見があるなら、お手持ちのソフトで3Dモデルデータを用意するのが一番ですが、
上記の「Adobe Dimension」を使用する方法は、なかなかシンプルかつ、モックアップに使用する分としてはこれで充分です。

「.glb形式」で書き出しができたら、読み込みたい階層にファイルを配置しておきます。

続いて次のセクションから、これを読み込んでWebサイトに表示する記述を書いていきます。

手順2. JSライブラリの読み込み

3Dモデルの表示には、Google謹製ライブラリ、「model-viewer」を使用します。

3Dモデル+Webサイトというと、Three.js をよく聞きますが、こちらの「model-viewer」は、
より手軽に3Dモデルを取り回すことができる印象です。
（※そしてGoogle製のライブラリということもあり、技術的な信頼性も抜群です。）

今回は試しに使ってみたいので、CDNから読み込みます。

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/4.0.0/model-viewer.min.js"></script>

↑これを、bodyの閉じタグの直前あたりに1行記述しておきます。

ライブラリの準備はこれだけで大丈夫です。続いて、HTMLの記述です。

手順3-1. HTML

上のセクションでHTMLの記述、と言いましたが、

重要なのは、
2行目から11行目にある model-viewer 要素です。
上記のライブラリを読み込むと、この独自コンポーネント(≒この書き方だと独自のタグ)
model-viewer が動作します。

それに続くその他のセクションは、ある程度の文字量を持ったセクションがいくつかあれば、
正直どんな形でもいいです。

今回はサンプルとして、次のようなものを用意しました。

<div class="my-container">
<model-viewer
  id="modelViewer"
  class="three-dimension-model"
  alt="sample-chair"
  src="./img/sample-chair.glb"
  auto-rotate
  auto-rotate-delay="0"
  orientation="0deg 0deg 0deg"
  rotation-per-second="30deg"
></model-viewer>

<section>
  <div class="common-inner">
    <h2 class="common-title">
      チェアが変える、<br class="is-break-sp" />日常のひととき。
    </h2>
    <p class="common-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc lorem. Suspendisse tincidunt, elit quis volutpat volutpat, sapien libero fermentum felis, non luctus ipsum lectus quis lorem.
Aenean euismod neque in nulla scelerisque,...（中略）...
    </p>
  </div>
</section>

<section>
  <div class="common-inner">
    <h2 class="common-title">
      座る、という<br class="is-break-sp" />新しい体験。
    </h2>
    <p class="common-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc lorem. Suspendisse tincidunt, elit quis volutpat volutpat, sapien libero fermentum felis, non luctus ipsum lectus quis lorem.
Aenean euismod neque in nulla scelerisque,...（中略）...
    </p>
  </div>
</section>

<section>
  <div class="common-inner">
    <h2 class="common-title">
      職人の情熱が宿る、<br class="is-break-sp" />唯一無二の一脚。
    </h2>
    <p class="common-text">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non nunc lorem. Suspendisse tincidunt, elit quis volutpat volutpat, sapien libero fermentum felis, non luctus ipsum lectus quis lorem.
Aenean euismod neque in nulla scelerisque,...（中略）...
    </p>
  </div>
</section>

<section>
  <div class="common-inner is-third">
    <h2 class="common-title">
      座るたびに感動を。<br />ぜひお試しください
    </h2>
    <p class="common-text-price">
      <span class="common-text-price-min">参考価格:</span>
        ¥198,000〜
      <span class="common-text-price-min">（税込）</span>
    </p>
    <a class="common-button" href="#">さらに詳しく見る →</a>
  </div>
</section>
</div>

↑model-viewer以外は、
ある程度の文章の長さがあれば自由です。

続いて、ここにCSSを反映していきます。

手順3-2. CSS

CSSは、例えばですが、次のようなサンプルを書きました。
メインとなる3Dモデルを画面中央に配置。

それがユーザーから見たときにz軸方向に（奥方向に）、各セクションのコンテンツと
レイヤー構造になるように（コンテンツの後ろを通るように）
z-indexを指定します。

内容としてはそのくらいで、あとのスタイリングは自由です。

.three-dimension-model {
  height: 300px;
  left: 50%;
  filter: grayscale(0.5) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.5));
  opacity: 0.7;
  position: fixed;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 300px;
  z-index: 5;
}

.common-inner {
  margin: 30rem auto 5rem;
  position: relative;
  width: 1080px;
}
@media screen and (max-width: 1023px) {
  .common-inner {
    width: calc(100% - 2rem);
  }
}
.common-inner.is-third {
  padding: 0 0 20rem;
}
.common-title {
  color: rgb(250, 238, 155);
  font-family: serif;
  font-size: 3rem;
  font-weight: 500;
  text-align: center;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 1023px) {
  .common-title {
    font-size: 2rem;
  }
}
.common-text {
  color: #fff;
  position: relative;
  z-index: 10;
}
@media screen and (max-width: 1023px) {
  .common-text {
    font-size: 0.6875rem;
  }
}
.common-text-price {
  bottom: -15%;
  color: #fff;
  font-family: serif;
  font-size: 1.25rem;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
}
.common-text-price-min {
  font-size: 0.6875rem;
}
.common-button {
  align-items: center;
  background: rgb(25, 205, 215);
  border-radius: 0.625rem;
  bottom: -30%;
  color: #fff;
  display: flex;
  font-size: 1rem;
  justify-content: center;
  height: 56px;
  left: 50%;
  position: absolute;
  text-decoration: none;
  transition: opacity 0.3s;
  transform: translateX(-50%);
  width: 280px;
}
.common-button:hover {
  opacity: 0.7;
}

↑CSSは一例です。スタイリングは自由にあてても動きます。

これで、ひとまず「Webサイトに3Dモデルを読み込む」ということができました！

今回の記事としては、まず「Webサイトに3Dモデルを読み込む」ということが目的だったので、
以上の記述で、それができたことになります。

今後、書いていく予定の
続編の記事では、冒頭の動画のように、

「ユーザーのスクロールに応じて3Dモデルが回転する」とか、
↑こういった動きを加えていく方法などについて、書いていきたいと思います。

実際に動くデモ

Webサイトに3Dモデルを表示するサンプル

↑こちらのデモでは、
「Webサイトに3Dモデル（一人がけチェアの3Dモデル）が読み込まれる」だけではなく、

「それがユーザーのページスクロールに反応して回転する」
というところまで確認できるデモになります。
この「ページスクロールに反応して3Dモデルが回転する」と言う部分は
今後の記事で、また続編として書いていきたいと思ってます。

ライブラリ公式サイト

https://modelviewer.dev/
こちらが、今回のサンプルで使用したライブラリ「mode-viewer」の公式サイトになります。

いろいろサンプルも載ってます。とても優れたライブラリだと思います。

この記事のまとめ

今回は、「mode-viewer」というライブラリを使って、
3DモデルをWebサイトに表示する記事を書いてみました。

いかがでしたでしょうか。
直近の記事で書いた

・慣性スクロールの「Lenis」
・スクロールと連動した動きを実現するScrollTimeline

↑これらの技術などと組み合わせることで、
従来以上にリッチなWeb表現ができる可能性が広がると思います。

この記事が皆さんのより良いWeb制作体験につながれば、嬉しく思います。

※この記事は内容の品質向上を目的に、随時更新を行う場合があります。