月: 2024年1月

WebVRでの日本語表示

投稿日

前回の方法では、なぜかWebVRではエラーとなり、日本語が表示できない
日本語を表示するには、いくつかの方法があるようで、スクリプトを利用した方法が紹介されていた
https://qiita.com/afujiu/items/d1885710acaf7b35fe03
理屈は、あまり理解できなかったが、試したところWebVRでもエラーなく表示できた　かつ　こちらの方が非常に簡単
https://webar-senior.glitch.me/webvr.html

     <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-frameで日本語表示

投稿日

WebARを簡単に実現するA-frame非常に便利だが、日本語に対応しておらず、デフォルトでは、日本語を表示できない
ネット検索するといくつかの対応策で表示できるようになるとのこと
こちらhttps://www.alpha.co.jp/blog/202308_02や

こちらhttps://crieit.net/posts/A-Frame-5e93285a259c3を参考に表示できるようになった
jsonファイルとpngをネットからお借りして導入

<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>

マーカーARで画像クリックにより動画再生・遷移の振り分け

投稿日

MindArを利用して画像トラッキング後、オブジェクト画像のクリックにより動画再生、別画像のクリックでURLを遷移

動画再生は、プレビュー画像を配置し、プレビュー画像のクリックで動画再生させる
javascriptによりイベント振り分け（動画再生・URL遷移）

    <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>