WebVRでの日本語表示

投稿日投稿者jiro@f

前回の方法では、なぜか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>