escapegame-2022/Yoshimiya/AR.html at master

Fork: 7

SKIP / escapegame-2022

Find file

Newer

Older

escapegame-2022 / Yoshimiya / AR.html

Yoshimiya Momoka on 7 Jun 2022 1 KB Update AR.html

Raw Blame History

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
    <!-- A-Frame を読み込む -->
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <!-- AR.js を読み込む -->
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <title>AR読み込み用ページ</title>
  </head>
  <body style="margin: 0; overflow: hidden">
    <a-scene embedded arjs vr-mode-ui="enabled: false;">
	    
      <!-- 3DCGモデルを読み込む -->
      <a-assets>
        <a-asset-item id="chara" src="CHARACTER1.gltf"></a-asset-item>
      </a-assets>

      <!-- マーカーの.pattファイルを読み込む -->
      <a-marker type="pattern" url="marker.patt">
        <!-- 3Dモデルを呼び出す -->
        <a-entity gltf-model="#chara" rocation="-90 0 0" animation="property: rotation; to: -90 0 0; loop: true; dur: 10000"></a-entity>
      </a-marker>

      <!-- カメラを追加 -->
      <a-entity camera></a-entity>
    </a-scene>
  </body>
</html>