事前準備

QRコードの作成

URLが決まっている前提。今回はGitHub Pagesを利用するため、事前にURLが確定している。

developers.google.com

マーカーの作成

かざしてARを表示するためのマーカーを作成する。

今回はARマーカーとQRコードを併用するため、先ほど作成したQRコードを下記のサイトにアップロード。その後、pngファイルとpattファイルをダウンロード。

jeromeetienne.github.io

Create a new project with the code below

サイトに記載のコードを一部修正して利用する。

<head>タグを追加
事前準備で作成したpattファイルを配置
<a-marker>の属性変更

属性	値
preset	削除
type	pattern
url	[配置したpattファイルのパス]

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Mraker Based Example</title>    
    </head>
    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
    <!-- we import arjs version without NFT but with marker + location based support -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <body style="margin : 0px; overflow: hidden;">
        <a-scene embedded arjs>
            <a-marker preset="hiro">
                <a-entity
                    position="0 0 0"
                    scale="0.05 0.05 0.05"
                    gltf-model="https://arjs-cors-proxy.herokuapp.com/https://raw.githack.com/AR-js-org/AR.js/master/aframe/examples/image-tracking/nft/trex/scene.gltf"
                ></a-entity>
            </a-marker>
            <a-entity camera></a-entity>
        </a-scene>
    </body>
</html>

Run it on a server

GitHub Pagesでホストする。

Settingsの下の方に「GitHub Pages」という項目があるので、ここを設定。

項目	値
Source:Branch	master
Source:Folder	/(root)

Open the website on your phone

Scan this picture to see content through the camera

スマホでアクセス&スキャン。

f:id:mtzml:20210313144303p:plain

以上。

Log

いろいろ

AR.jsでマーカー型のARを実装する