～シリーズ情報～
はじめに
Wedding ITとは
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
hamaruki.com
お返しの封筒にARマーカーを付与してみたいので必要な技術を習得中です．
前回は，GlitchやARマーカー，自作ARマーカーの使い方を学んでいました．
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
hamaruki.com
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
hamaruki.com
404 NOT FOUND | Sun wood AI labs.2
-- はまる木 --
hamaruki.com
今回は，それらの知識を活かして，自作モデルの作り方をやっていこうと思います．
ちなみに無料で実践できます．
必要なもの
- Glitch
(前回のファイル) - AR.js
- Blender(プラグインなし)
自作モデルの作り方
まずは，好きなモデルをダウンロードしてきて，Blenderにインポートします．
次に，ファイル＞エクスポート＞GLTFを選択
GLTF形式で保存します．
自作モデルの確認
こちらのサイトでGLTFファイルを確認することができます．
glTF Viewer
Drag-and-drop preview tool for glTF 2.0 3D models.
gltf-viewer.donmccurdy.com
向きを確認しましょう！
自作モデルを使ってみる
ここから，自作モデルを使っていきます．先ほど，保存したGLTFファイルをドラッグアンドドロップしてください．
そうしたらコピーしておきます．
下記コードの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>
これで，下記の画像を読み込むと
こんな感じに表示されます．
取りあえずは表示されましたが，モデルが暗いので調整します．
マテリアルの調整
原因はマテリアルでした．
Blenderでマテリアルを一度削除して，作り直します．今回は分かりやすく色を変えてみました．
一応確認しておきます．
ちゃんと表示されました．
最終的なコード
最終的なコードはこちらになります．
<!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>
おわりに
次回は，この技術を使って，ご祝儀とコラボしていきます．
コメント