はじめに
<model-viewer>はGoogleが開発したWebコンポーネントで、数行のコードで簡単に3DモデルをWebサイトに表示できます。これによりWeb開発者は手軽にインタラクティブな3Dコンテンツを追加できます。この記事では<model-viewer>の基本的な使い方と、Reactでの実装例を紹介します。
デモサイトでは<model-viewer>を使った3Dモデルの表示例を確認できます。
デモサイト: https://demo.kira924age.com
<model-viewer>とは
<model-viewer>はGoogleが開発した3Dモデルを描画するためのWebコンポーネントです。これを使うことで、わずか数行のコードを追加するだけでWebサイトに3Dモデルを表示できます。<model-viewer>はglTF/GLB形式のファイルのみをサポートしており、他の形式（例えばFBXなど）には対応していません。
インストール方法
<model-viewer>は以下のようにしてnpmを用いてインストールできます。
ピア依存にThree.jsが含まれるためthree packageをインストールする必要もあります。
npm install three
npm install @google/model-viewer
以下のようにCDNのスクリプトを読み込むことでも利用可能です。
<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
利用方法
以下のように通常のHTML要素と同じように記述することで利用できます。
<model-viewer src="/path/to/3d-model" alt="alt message" />
src属性で3Dファイルのpathを、alt属性で代替テキストを指定します。
これらの仕様については下記の公式ドキュメントに記載されています。
公式ドキュメント: https://modelviewer.dev/docs/index.html
Viewerのスタイル
<model-viewer>コンポーネントの大きさや背景色はCSSで指定することが出来ます。
例えば高さや幅を変えたい場合は以下のようにwidthプロパティやheightプロパティを指定します。
model-viewer {
width: 600px;
height: 400px;
}
Reactによるデモ
デモサイト: https://demo.kira924age.com
実際に<model-viewer>を利用してデモサイトを作成しました。今回はReactによりUIを構築しました。
以下のように@google/model-viewerをimportすることで<model-viewer> web copmponentを簡単に利用することができました。
import React from 'react'
import foxModel from './assets/Fox.glb'
import "@google/model-viewer";
import './App.css'
const App: React.FC = () => {
return (
<>
<div className="model-viewer-container">
{ /* @ts-expect-error - model-viewer is not a valid HTML element, but it is a valid custom element */}
<model-viewer src={foxModel} alt="A 3D model of a fox" camera-controls autoplay />
</div>
</>
)
}
export default App
全体のコードはGitHubを参照してください。
おわりに
この記事では、<model-viewer>を使用してWebサイトに3Dモデルを簡単に表示する方法を紹介しました。たった数行のコードを記述するだけで3D表示ができてとてもお手軽です。
Discussion