Zenn
🙄

AR.jsでWebARしてみる(1) 基本構文

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

はじめに

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

参考

※Hello, AR World! (basic.html)を勉強する

デモ

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

ソース

参考で紹介したサイトのHello, AR World! (basic.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;">
  
<!-- set detectionMode and matrixCodeType to enable barcode marker detection and custom pattern files -->

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false; detectionMode: mono_and_matrix; matrixCodeType: 3x3;">

    <a-assets>
	<img id="grid" src="images/border.png" />
	<img id="earth-flat" src="images/earth-flat.jpg" />
	<img id="earth-sphere" src="images/earth-sphere.jpg" />
    </a-assets>
    
    <a-marker type="pattern" url="data/kanji.patt">
        <a-box position="0 0.5 0" 
               material="color: red; transparent: true; opacity: 0.50;">
        </a-box>
    </a-marker>
    
    <a-marker type="barcode" value="0">
        <a-box position="0 0.5 0" 
               material="src: #grid; color: yellow; transparent: true; opacity: 0.50;">
        </a-box>
    </a-marker>

    <a-marker type="barcode" value="1">
        <a-plane position="0 0 0" 
                 rotation="-90 0 0"
               material="src: #earth-flat;">
        </a-plane>
    </a-marker>

    <a-marker type="barcode" value="2">
        <a-sphere position="0 0.5 0" 
               material="src: #earth-sphere; transparent: true; opacity: 0.95;">
        </a-sphere>
    </a-marker>
    
    <a-entity camera></a-entity>
    
</a-scene>
</body>
</html>

確認したこと

マーカー

マーカーに関する情報はここにある

<a-marker type="pattern" url="data/kanji.patt">
<a-marker type="barcode" value="0">
<a-marker type="barcode" value="1">
<a-marker type="barcode" value="2">

barcodeの画像はgithubのAR.js-examples\markers\barcodesにある

a-boxタグ

立方体オブジェクトを生成するタグ

<a-box position="0 0.5 0" 
   material="color: red; transparent: true; opacity: 0.50;">
</a-box>
  • position
    • ARマーカーとの位置関係(x,y,z座標) y座標を0.5にするとマーカーの上にオブジェクトが乗る感じになる

a-planeタグ

平面オブジェクトを生成するタグ

<a-plane position="0 0 0" 
    rotation="-90 0 0"
    material="src: #earth-flat;">
</a-plane>
  • rotation
    • オブジェクトを回転する。rotation="-90 0 0"はx軸を軸に-90度回転
  • material
    • テクスチャを設定する。src: #earth-flatは、id="earth-flat"のimgタグを示す
    • <img id="earth-flat" src="images/earth-flat.jpg" />

a-sphereタグ

球体オブジェクトを生成するタグ

<a-sphere position="0 0.5 0" 
    material="src: #earth-sphere; transparent: true; opacity: 0.95;">
</a-sphere>
  • transparent
    • trueだと透明度の設定が有効になる
  • opacity
    • 透明度の設定。0.95は95%(ちょっと薄い)

Discussion