【Wedding×IT】(ぱーと4)お返しAR~自作モデル編~

ウェディングテック

はじめに

Wedding ITとは

404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --

お返しの封筒にARマーカーを付与してみたいので必要な技術を習得中です.

前回は,GlitchやARマーカー,自作ARマーカーの使い方を学んでいました.

404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --

今回は,それらの知識を活かして,自作モデルの作り方をやっていこうと思います.

ちなみに無料で実践できます.

必要なもの

  • Glitch
    (前回のファイル)
  • AR.js
  • Blender(プラグインなし)

自作モデルの作り方

まずは,好きなモデルをダウンロードしてきて,Blenderにインポートします.

file

次に,ファイル>エクスポート>GLTFを選択

file

GLTF形式で保存します.

file

自作モデルの確認

こちらのサイトでGLTFファイルを確認することができます.

glTF Viewer
Drag-and-drop preview tool for glTF 2.0 3D models.

向きを確認しましょう!

file

自作モデルを使ってみる

ここから,自作モデルを使っていきます.先ほど,保存したGLTFファイルをドラッグアンドドロップしてください.

file

そうしたらコピーしておきます.

file

下記コードのgltf-modelのところにコピぺします.

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="custom" type="pattern" url="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/pattern-ar_marker5.patt?v=1664723363752">
        <a-entity
          scale="0.2 0.2 0.2"
          gltf-model="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/AR_DOG.gltf?v=1664966345883"
          position="0 0 1"
          rotation="0 180 0"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

これで,下記の画像を読み込むと

こんな感じに表示されます.

file

取りあえずは表示されましたが,モデルが暗いので調整します.

マテリアルの調整

原因はマテリアルでした.
Blenderでマテリアルを一度削除して,作り直します.今回は分かりやすく色を変えてみました.

file

一応確認しておきます.

file

ちゃんと表示されました.

file

最終的なコード

最終的なコードはこちらになります.

<!DOCTYPE html>
<html>
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <!-- we import arjs version without NFT but with marker + location based support -->
  <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
  <body style="margin : 0px; overflow: hidden;">
    <a-scene embedded arjs>
      <a-marker preset="custom" type="pattern" url="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/pattern-ar_marker5.patt?v=1664723363752">
        <a-entity
          scale="4 4 4"
          gltf-model="https://cdn.glitch.global/d60e8219-715c-4d35-9124-42984f6c1f3d/AR_DOG_v3.gltf?v=1664967493840"
          position="0 0 1"
          rotation="0 180 0"
        ></a-entity>
      </a-marker>
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>

おわりに

次回は,この技術を使って,ご祝儀とコラボしていきます.

コメント

タイトルとURLをコピーしました