MENU
Life and Digital
  1. ホーム
  2. ブログ
  3. google model viewer で３Dモデルを表示

google model viewer で３Dモデルを表示

ブログ

<model-viewer> で mode3.gbl というファイル名の3Dモデルを表示したい。

基本的なHTMLの記述は以下のようになります。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3Dモデル表示</title>
    <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
    <style>
        model-viewer {
            width: 80%; /* モデルの幅 */
            height: 500px; /* モデルの高さ */
            margin: 0 auto; /* 中央寄せ */
        }
    </style>
</head>
<body>
    <model-viewer src="mode3.gbl" alt="3Dモデル"></model-viewer>
</body>
</html>

このコードに関する説明:

  • <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>: <model-viewer> コンポーネントを利用するために必要なスクリプトを CDN から読み込んでいます。
  • <model-viewer src="mode3.gbl" alt="3Dモデル"></model-viewer>:
    • <model-viewer> タグが3Dモデルを表示するための要素です。
    • src="mode3.gbl" は、表示する3Dモデルの .glb ファイルのパスを指定しています。この例では、HTMLファイルと同じディレクトリに mode3.gbl が存在することを想定しています。もし別の場所にある場合は、正しいパスを指定してください。（例: models/mode3.gbl や https://example.com/models/mode3.gbl など）
    • alt="3Dモデル" は、モデルが読み込めなかった場合などに表示される代替テキストです。アクセシビリティの観点からも設定しておきましょう。
  • <style> タグ内の記述:
    • model-viewer { ... } は、<model-viewer> 要素のスタイルを指定しています。
    • width: 80%; は、モデルの表示幅を親要素の80%に設定しています。
    • height: 500px; は、モデルの表示高さを500ピクセルに設定しています。
    • margin: 0 auto; は、モデルを水平方向の中央に配置しています。

表示させるための手順:

  1. HTMLファイルの作成: 上記のHTMLコードをテキストエディタにコピーし、.html という拡張子で保存します。（例: index.html）
  2. .glb ファイルの準備: 表示したい3Dモデルの .glb ファイル (mode3.gbl) を用意します。
  3. ファイルの配置: 作成したHTMLファイル (index.html) と .glb ファイル (mode3.gbl) を同じディレクトリ（フォルダ）に配置します。
  4. Webサーバーでの公開 (推奨):
    • ローカル環境で確認する場合は、HTMLファイルをWebブラウザで直接開くこともできますが、一部機能が制限される場合があります。
    • より安定した動作のためには、ローカルに簡単なWebサーバーを立てるか、レンタルサーバーなどにファイルをアップロードして公開することをおすすめします。

さらにカスタマイズする場合:

<model-viewer> には、さまざまな属性を追加することで、表示方法や操作性をカスタマイズできます。よく使われる属性の例：

  • camera-controls: ユーザーによるカメラ操作（回転、ズーム、パン）を有効にします。
  • auto-rotate: モデルを自動的に回転させます。
  • shadow-intensity="1": モデルに影を付けます。（値は0から1で調整可能）
  • environment-image="path/to/environment.hdr": 環境光を設定し、よりリアルな質感を表現します。（HDR画像が必要です）
  • autoplay: アニメーションが含まれている場合に自動再生します。
  • loop: アニメーションをループ再生します。

これらの属性は、<model-viewer> タグに追加するだけで簡単に利用できます。

例：

HTML

<model-viewer src="mode3.gbl" alt="3Dモデル" camera-controls auto-rotate shadow-intensity="1"></model-viewer>

より詳しい <model-viewer> の使い方や利用可能な属性については、公式ドキュメントを参照してください。

上記の手順で、<model-viewer> を使って mode3.gbl をWebページに簡単に表示できるはずです。もしうまくいかない場合は、エラーメッセージや具体的な状況を教えていただければ、さらに詳しくサポートできます。

ブログ
よかったらシェアしてね！
  • URLをコピーしました！

コメント

コメントする

目次