Zenn
🙌

AR.jsでWebARしてみる(3) Multi-Textured Cube

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

はじめに

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

参考

※Multi-Textured Cube (cubemap.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>
<script src="js/aframe-multisrc-component.js"></script>
<body style="margin: 0px; overflow: hidden;">

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
	<img id="earth-sphere" src="images/earth-sphere.jpg" />
        <img id="xpos" src="images/box-sides/xpos.png">
        <img id="xneg" src="images/box-sides/xneg.png">
        <img id="ypos" src="images/box-sides/ypos.png">
        <img id="yneg" src="images/box-sides/yneg.png">
        <img id="zpos" src="images/box-sides/zpos.png">
        <img id="zneg" src="images/box-sides/zneg.png">
    </a-assets>
    <!-- 
    for more info, see: https://aframe.io/docs/1.0.0/components/animation.html 
    for more examples:  https://stemkoski.github.io/A-Frame-Examples/animation.html
    -->
    <a-marker type="pattern" url="data/hiro.patt">
        <a-box position="0 0.5 0"
               multisrc="srcs:#xpos,#xneg,#ypos,#yneg,#zpos,#zneg"
               material="transparent: true; opacity: 0.95; side: double;">
        </a-box>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

確認したこと

画像の配置

配置された画像はこれ

ARマーカー(hiro)との位置関係はこんな感じ

Discussion