ARテスト

自サイトでARコンテンツ

キーボードの前にマーカーを印刷した紙を置き、USBカメラでそのマーカーを写すとモデルが出現します。

ARテスト、自サイトでARコンテンツ

その様子の動画です(00:17あたりから):

ソースはこれ。たった数行です。いやはや、すごいものがどんどんリリースされていたのですね。

<!DOCTYPE html>
<head>
<link href='https://www.moonlight-lullaby.info/img/tameiki-boz.png' rel='icon' type='image/x-icon'/>
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://cdn.rawgit.com/jeromeetienne/AR.js/1.7.7/aframe/build/aframe-ar.js"></script>
<style type="text/css">
    body {margin:0px; overflow:hidden;}
</style>
</head>

<body>
<a-scene>
    <a-marker preset="hiro">
        <a-gltf-model src="/asset/2019/07-10/test.glb" position="0 0 0" scape="0 0 0" rotation="-40 0 0"></a-gltf-model>
    </a-marker>
    <a-entity camera></a-entity>
</a-scene>
</body>
</html>

ARは、例えば「ぬいぐるみキット」などの説明書にマーカーを印刷して、立体物や動画を表示するのに役立つかもしれません。

3D 

関連記事