こんにちは、もしくはこんばんは。シロです！
今回は「簡単３ステップ！ブログに動かせる3Dモデルを掲載する方法」というテーマでお届けします。
最近では、Web上で3Dモデルを公開することがとても簡単になってきました。
しかし、自分で作った3Dモデルをブログに載せる方法がわからないという方も多いのではないでしょうか？
この記事では、初めての方でも3ステップでブログ上に3Dモデルを掲載する方法をご紹介します。
自分で作った3Dモデルをブログに載せて、読者に自分の作品を自慢しましょう！
できるようになること
↓のように3Dモデルをブログ上に掲載できるようになります！
前提条件
- HTML, CSS, JavaScriptの基礎知識
- 3Dモデルをサーバにアップロードしていること
3Dモデルブログ上に掲載するために、model-viewerというJavaScriptライブラリを使用します。
model-viewerはglTF/GLB 3Dモデルのみをサポートしています。
ステップ1：model-viewerのインストール
まず初めに、以下のスクリプトをHTMLファイルに挿入しJavaScriptライブラリを読み込みます。
<script type='module' src='https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js'></script>
<script nomodule src='https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js'></script>Webサイト全体で3Dモデルを掲載したい場合は<head>内に書いておきましょう。
単発的に使いたい場合は<model-viewer>の直前に直接記入しても大丈夫です。
ステップ2：HTMLでmodel-viewerを設定する
次に、以下のようにHTMLのbodyタグ内にmodel-viewerを設定します。
<body>
<model-viewer
src="path/to/3D/model.gltf"
alt="A 3D model"
ar
camera-controls
autoplay
shadow-intensity="1"
exposure="0.5"
></model-viewer>
</body>上記の例では、次の属性を指定しています。
src: 3Dモデルのパスalt: モデルの代替テキストar: AR対応camera-controls: カメラの制御を有効にするautoplay: 自動再生を有効にするshadow-intensity: 影の強さを設定するexposure: 明るさを調整する
ステップ3：CSSでmodel-viewerをスタイル設定する
model-viewerには、CSSでスタイルを設定することができます。
以下の例では、model-viewerを100％幅にし、高さを400ピクセルに設定し、その周りに1ピクセルの境界線を付けます。
model-viewer {
width: 100%;
height: 400px;
border: 1px solid black;
}おわりに
この記事では、model-viewerを使用してWebページ上に3Dモデルを表示する方法について解説しました。
model-viewerを使えば、簡単にWebページ上に3Dモデルを表示することができ、ARアプリケーションを作成することもできます！
3DモデルをWebページ上に表示することで、自分で作った3D作品を簡単に公開でき、自身のモチベーション維持にもつながります。
Webページの魅力を高めるために、ぜひmodel-viewerを使って3Dモデルを表示してみてください！
この記事が、あなたの3Dコンテンツ制作に少しでもお役に立てたら幸いです！
コメント