Zenn
🍣

AR.jsでWebARしてみる(7) Introduction to Scripting

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

はじめに

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

参考

※Introduction to Scripting (scripting.html)を勉強する

デモ

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

ソース

参考で紹介したサイトのIntroduction to Scripting (scripting.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;">
<script>
AFRAME.registerComponent('updater', {
	init: function()
	{
                // declare variable for later access
		this.num = 0;
                // you can also access the underlying 3D object of a scene object,
                //   for example:
		// let target = document.querySelector('#earth').object3D;
                // target.scale.set( 0.75, 0.75, 0.75 );
	},
	
        // time      = total time since init (milliseconds)
        // timeDelta = time since last tick
	tick: function (time, timeDelta) 
	{
		this.num += 1;
                // console.log( this.num );
	}
	
});
// access underlying 3D object this component is attached to
AFRAME.registerComponent('spinner', {
	init: function()
	{
		this.el.object3D.scale.set(0.75, 0.75, 0.75);
	},
	tick: function (time, timeDelta) 
	{
		this.el.object3D.rotation.y += 0.01
	}
});
</script>

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
	<img id="earth-sphere" src="images/earth-sphere.jpg" />
    </a-assets>
    <a-marker type="pattern" url="data/kanji.patt">
        <a-sphere 
               id="earth"
               position="0 0.5 0" 
               material="src: #earth-sphere; transparent: true; opacity: 0.95;"
               spinner >               
        </a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
    <!-- empty entity, running previously declared script -->
    <a-entity updater></a-entity>
</a-scene>
</body>
</html>

確認したこと

spinnerは文字列で、spinnerを含む a-sphere タグを指定している

<script>
AFRAME.registerComponent('spinner', { /*省略*/ });
</script>
<a-sphere spinner></a-sphere>

そのため、以下のようにすると2つの a-sphere タグのオブジェクト(地球)に対し、別のアニメーションを設定できる。

<script>
AFRAME.registerComponent('spinner', { /*省略*/ });
AFRAME.registerComponent('spinner2', { /*省略*/ });
</script>
<a-sphere spinner></a-sphere>
<a-sphere spinner2></a-sphere>

異なる動きをする2つの地球はこんな感じ

そのときの全ソースはこれ

<!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;">

<script>

AFRAME.registerComponent('updater', {

	init: function()
	{
		this.num = 0;
	},
	tick: function (time, timeDelta) 
	{
		this.num += 1;
	}
	
});
AFRAME.registerComponent('spinner', {
	init: function()
	{
		this.el.object3D.scale.set(0.75, 0.75, 0.75);
	},	
	tick: function (time, timeDelta) 
	{
		this.el.object3D.rotation.y += 0.01
	}
});
AFRAME.registerComponent('spinner2', {
    init: function()
    {
        this.el.object3D.scale.set(0.5, 0.5, 0.5);
    },

    tick: function (time, timeDelta) 
    {
        this.el.object3D.rotation.x += 0.01
        this.el.object3D.rotation.y -= 0.01
    }
});
</script>

<a-scene embedded vr-mode-ui="enabled: false;" arjs="debugUIEnabled: false;">
    <a-assets>
		<img id="earth-sphere" src="images/earth-sphere.jpg" />
	</a-assets>
    <a-marker type="pattern" url="data/hiro.patt">
        <a-sphere 
               id="earth"
               position="0 0.5 0" 
               material="src: #earth-sphere; transparent: true; opacity: 0.95;"
               spinner >
        </a-sphere>
        <a-sphere 
               id="earth"
               position="1 0.5 1" 
               material="src: #earth-sphere; transparent: true; opacity: 0.70;"
               spinner2 >
        </a-sphere>
    </a-marker>
    <a-entity camera></a-entity>
    <!-- empty entity, running previously declared script -->
    <a-entity updater></a-entity>
</a-scene>
</body>
</html>

Discussion