犬の3Dモデル(glbファイル)をA-Frameを使ってweb上に表示させてみます。
まずは新規ディレクトリを作成
まずは新規ディレクトリを作成して、その中にhtmlファイルとglbファイルを用意します。
今回は、フリー素材サイトからダウンロードした、犬の3Dモデルを使用します。
/app # アプリ名
│
├── index.html # HTMLファイル
├── dog.glb
HTMLファイルにa-frameをインポート
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<!-- このあたりにコードを書いていく -->
</a-scene>
</body>
</html>
準備方法など基本的なことはこちらから！
a-assetsタグを記述
a-sceneタグの中にa-assetsタグを書き足します。
さらにそのなかに、a-asset-itemタグを書き足します。idを付けsrcは表示させたいglbファイルへのパスを書きます。
<a-scene>
<a-assets>
<a-asset-item id="dogModel" src="dog.glb"></a-asset-item>
</a-assets>
</a-scene>
a-entityタグを追加
モデルを出すために、a-entityタグを追加します。
srcには先ほど、追加したa-asset-itemのidを記述します。
先頭の「#」は重要なので、忘れないように！
<a-scene>
<a-assets>
<a-asset-item id="dogModel" src="dog.glb"></a-asset-item>
</a-assets>
<a-entity
src="#dogModel"
position="0 0 -3"
></a-entity>
</a-scene>
Node.jsで動かす
そのままではglbができないようなので、Node.jsでサーバーを動かします。
Node.jsはインストールしてないひとは、インストールしてください。
http://127.0.0.1:8080で、開くことができます。
npm install -g http-server
http-server
ブラウザで確認
うまくglbファイルを表示させることができました。
全体像
コードの全体像はこちらです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://aframe.io/releases/1.6.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-assets>
<!-- 3Dモデルの読み込み -->
<a-asset-item id="dogModel" src="dog.glb"></a-asset-item>
</a-assets>
<a-entity gltf-model="#dogModel" position="0 0 -3"></a-entity>
</a-scene>
</body>
</html>
コメント