More than 3 years have passed since last update.

<style>にバナーを差し込む

#A-Frame

Last updated at 2020-12-03Posted at 2020-12-02

画面上にバナーを差し込む方法。参考プログラム。

test.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>penguin</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover, shrink-to-fit=no" />
  <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
  <script src="https://raw.githack.com/AR-js-org/AR.js/3.3.1/aframe/build/aframe-ar-nft.js"></script>
  <style>
    * {
      margin: 0; padding: 0;
    }

    body {
      overflow: hidden;
      cursor: none;
    }

    #banner {
      position: fixed;
      bottom: 0;
      left: 0; right: 0;
      height: 88px;
      background: url(https://placehold.jp/375x88.png) center bottom no-repeat;
      background-size: contain;
    }

    #mask {
      display: flex;
      align-items: center;
      justify-content: center;
      position: fixed;
      top: 0; bottom: 0;
      left: 0; right: 0;
      color: #fff;
      background: #000;
    }

    .a-loader-title {
      display: none !important;
    }
  </style>
</head>
<body>
  <script>
    let timer;
    let audio;

    AFRAME.registerComponent('marker', {
      init: function () {
        const marker = this.el;

        marker.addEventListener('markerFound', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          timer = setTimeout(() => {
            audio.currentTime = 0;
            audio.play();
          }, 0);

        });

        marker.addEventListener('markerLost', function () {
          if (!audio) {
            return;
          }

          clearTimeout(timer);
          audio.pause();
        });
      }
    });

    window.onload = () => {
      audio = document.getElementById('audio');

      document.getElementById('mask').addEventListener('click', () => {
        audio.play();
        audio.pause();
        document.body.removeChild(document.getElementById('mask'));
      });
    };
  </script>
  <a-scene embedded arjs="debugUIEnabled: false" vr-mode-ui="enabled: false">
    <a-assets>
      <audio id="audio" src="audio.mp3"></audio>
      <!--https://poly.google.com/view/fBXvsC6pe_V-->
      <a-asset-item id="obj" src="Mesh_Penguin.gltf"></a-asset-item>
   </a-assets>
    <a-marker marker type='pattern' url='./pattern.patt'>
      <a-entity gltf-model="#obj" scale=".01 .01 .01" position="0 0 0"></a-entity>
    </a-marker>
    <a-entity camera></a-entity>
  </a-scene>
  <a id="banner" href="https://camp-fire.jp/projects/344677/preview?token=1ojwjqbf" target="_blank"></a>
  <div id="mask">TAP TO START</div>
</body>
</html>

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up