シニア旅日記

     <a-entity
        mb-text
        position="6 5 -8"
        scale="5 5 5"
        data-text="画像をクリックしてね"
      ></a-entity>
 
<script>
    function aframeMutlByte() {
      document.querySelectorAll("[mb-text]:empty").forEach((mb_text) => {
        console.log(mb_text.dataset.text);
        const text = mb_text.dataset.text;
        const text_cnt = text.length;
        const width = text_cnt * 1.4;
        const height = 1.6;
        let cvs = document.createElement("canvas");
        let ctx = cvs.getContext("2d");
        cvs.width = width * 100;
        cvs.height = height * 100;
        ctx.fillStyle = "rgb(255, 255, 253)";
        ctx.font = "100pt Arial";
        ctx.fillText(text, 0, 125);
       const base64 = cvs.toDataURL("image/png");
        mb_text.innerHTML = `<a-image scale="${width / 10} ${
          height / 10
        } 1" src="${base64}"></a-image>`;
      });
    }
    aframeMutlByte();
  </script>

<a-text
		id="text"
		rotation="0 0 0"
		position="0.7 -0.4 -0.01"
		value="クリックでyoutubeへ"
		font="https://web-senior-backup.glitch.me/noto-sans-cjk-jp-msdf.json"
		font-image="https://cdn.glitch.global/2b6a4eb5-022f-4add-9765-5212abbb4a7b/noto-sans-cjk-jp-msdf.png"
		negate="false"
		color="white"
		scale="0.5 0.5 0.5"
	></a-text>

    <script>
        AFRAME.registerComponent("click1", {
          init: function () {
            var panel = document.querySelector("#panel");
            var v = document.querySelector("#vid");
            var pic = document.querySelector("#pic");
            let is_playing = false;
            this.el.addEventListener("click", () => {
              console.log("click1");
              //       alert("clicked_start");
              if (!is_playing) {
                pic.setAttribute("visible", false);
                v.play();
                is_playing = true;
              } else {
                v.pause();
                // location.href =
                //   "https://youtu.be/XeZcFc1jD9E?si=T34Z7Hyxt43I9meK";
                is_playing = false;             
              }
            });
          },
        });
      </script>

<script src="https://unpkg.com/aframe-chromakey-material/dist/aframe-chromakey-material.min.js"></script>

    <a-video
      src="#vid"
      position="0 0 -7"
      rotation="0 0 0"
      width="6"
      height="1.7"
      material="shader: chromakey; src: #vid; color:0.1 0.9 0.2"
    >
    </a-video>