Zenn
🕌

AR.jsでWebARしてみる(4) Animation

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

はじめに

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

参考

※Animation (animation.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>
        <img id="earth-sphere" src="images/earth-sphere.jpg" />
    </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-sphere position="0 0.5 0" 
               material="src: #earth-sphere; transparent: true; opacity: 0.95;"
               animation__rotate = "property: rotation; dur: 8000; easing: linear; dir: normal; from:0 0 0; to: 0 360 0; loop: true;">
        </a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

確認したこと

Multiple Animations

A-Frame anmationによると複数のAnimationを設定できるらしい。animationのあとに _(アンダーバー)を2つつけ任意の文字列を設定すればいける。ためしに2つの動作を設定してみた

作ったソースはこれ。animation__2というanimation設定を追加しy軸方向に上昇する動きを追加した。

<!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>
	<img id="earth-sphere" src="images/earth-sphere.jpg" />
    </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-sphere position="0 0.5 0" 
            material="src: #earth-sphere; transparent: true; opacity: 0.90;"
            animation__rotate = "property: rotation; dur: 2000; easing: linear; dir: normal; from:0 0 0; to: 0 360 0; loop: true;";
            animation__2="property: position; from:0 0 0; to: 0 3 0; dur: 2000; easing: linear; loop: true";>
        </a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

Discussion