【A-Frame】3DOBJ（gltf）を出してみよう

2926 ワード
WebAR AR aframe AR テキストリンク

コード全体

書いた日

2020年8月23日

書いた目的
WebARの業界を盛り上げたい

最低限これはできて欲しい

・前回の記事をみている
https://qiita.com/e_san_desuyo/items/005753a285a51e4efdcb
・VSCodeをインストールしている

手順

（コード全体はgitのっけているのでそちらをみてください）

（１）gltfファイルの3Dオブジェクトをダウンロードする

オススメのサイト：sketchfab
https://sketchfab.com/feed

(2)ダウンロードしたファイルをindex.htmlと同じ階層に置く

.binファイルはgltfをダウンロードすると一緒についてきます

(3)コードを書く

便宜上、カメラやライトを設置していますが、なくてもgltfモデルは出現します。

ポイントは
（１）gltfファイルとbinファイルをダウンロードすること
（２）a-asettsタグ、a-asset-itemsタグ、a-entityタグを記述すること
（３）IDを揃えること（IDは任意の名前です）
※私の場合、デフォルトの3DOBJがデカすぎたのでscaleで調整しています。

index.html
<!doctype html>
<html>
  <head>
    <!-- aframeの導入 -->
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

    <title>ehe_practice</title>
  </head>
  <body>
    <a-scene>
      <!-- 3Dモデル（gltfファイル） -->
      <a-assets>
        <a-asset-items id="bird" src="scene.gltf" ></a-asset-items>
      </a-assets>
      <a-entity gltf-model="#bird" scale="0.01 0.01 0.01"></a-entity>
      <!-- カメラ設置 -->
      <a-camera
        position="0 10 30"
        cursor-visible="true"
        cursor-scale="5"
        cursor-color="#0095DD"
        cursor-opacity="1">
      </a-camera>
      <!-- ディレクショナルライト（平行光源）の追加 -->
      <a-light
        type="directional"
        color="#FFF"
        intensity="0.5"
        position="-1 1 2">
      </a-light>
      <!-- アンビエントライトの追加（環境光） -->
      <a-light
        type="ambient"
        color="#FFF">
      </a-light>
    </a-scene>
  </body>
</html>

完成イメージ