Zenn
🍣

AR.jsでWebARしてみる(2) 3DモデルglTF

2020/10/11に公開
HTML
aframe
WebAR
AR.js
tech

はじめに

WebARで分かったことメモしていく

参考

※3D model (models.html)を勉強する

デモ

  • 以下の環境で動作を確認
    • iOS 13.7 Safari
    • Android 9 Chrome
    • Windows10 Firefox 81.0.1

ソース

参考で紹介したサイトの3D model (models.html)のソース

<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">
<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
        <a-asset-item id="tree" src="models/tree.gltf"></a-asset-item>
    </a-assets>
    <a-marker type="pattern" url="data/kanji.patt">
        <a-entity   position="0 0 0" 
                    rotation="0 0 0"
                    scale="0.10 0.10 0.10"
                    gltf-model="#tree" >
        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

確認したこと

glTF

tree.gltfが3Dオブジェクトらしい。glTF (GL Transmission Format) はJSONによって3Dモデルやシーンを表現する一般的なフォーマットらしい。

ためしに、Blenderで作成した3Dオブジェクトを表示できるか検証。Blenderで3Dオブジェクトをgltf形式で出力

test02.gltfを作成し、tree.gltfのかわりに設定してみると、おぉ！表示できた！

検証で作ったソースはこちら

<!doctype HTML>
<html>
<link rel="icon" href="data:;base64,iVBORw0KGgo=">
<script src="js/aframe.min.js"></script>
<script src="js/aframe-ar.js"></script>
<body style="margin: 0px; overflow: hidden;">

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
        <a-asset-item id="tree" src="models/tree.gltf"></a-asset-item>
        <a-asset-item id="test02" src="models/test02.gltf"></a-asset-item>
    </a-assets>
    
    <a-marker type="pattern" url="data/hiro.patt">
        <a-entity   position="0 0 0" 
                    rotation="0 0 0"
                    scale="0.7 0.7 0.7"
                    gltf-model="#test02" >
        </a-entity>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

Discussion