AR.js テキストを3D空間上に表示する #A-Frame

A-frameのtext geometry componentを使用することで空間上にテキストを3D表示することができる。

手順

開発環境 : Glitch

フォントの準備

text geometry componentのデフォルトフォントには日本語が含まれていないので、日本語を含むフォントを準備する。

↓　今回選んだやつ（Download familyをクリックでダウンロードできる）

text geometry componentではfontファイルをjson化したものが必要。
以下のサイトでファイルをjsonに変換する。

ファイルを選択をクリックして、フォントファイルを選択。
Generate a JSON file (.json)にチェックを入れる。
Convertボタンをクリックしたら変換されたjsonファイルがダウンロードされる。

3Dテキストを作成

Assetsを選択して、UPLOAD AN ASSETでfontのjsonファイルをアップロードする。

アップロードしたassetをクリックし、でてきたポップアップのCopy URLをクリックしてURLをコピーする。

<head>にtext geometry componentを追加する

<script src="https://unpkg.com/aframe-text-geometry-component@^0.5.1/dist/aframe-text-geometry-component.min.js"></script>

以下のように<a-assets>内に<a-assets-item>を追加する。

<a-assets>
    <a-asset-item
      id="DelaGothicFont"
      src="コピーしたURL"
    ></a-asset-item>
</a-assets>

以下のようにテキストを追加する

<!--    3Dtext    -->
<a-entity
    position="-0.5 0.2 -4"
    scale="0.3 0.3 0.3"
    material="color: #56cfe1"
    text-geometry="value: テキストを！; height: 0.3; font: #DelaGothicFont"
    shadow="receive: true"
></a-entity>

コード全部

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <title>3D TEXT</title>

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap"
      rel="stylesheet"
    />

    <script src="https://aframe.io/releases/1.4.2/aframe.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
    <script src="https://unpkg.com/aframe-text-geometry-component@^0.5.1/dist/aframe-text-geometry-component.min.js"></script>
  </head>

  <body>
    <!-- a-frame scene -->
    <a-scene
      embedded
      arjs="trackingMethod: best; sourceType: webcam; debugUIEnabled: true;"
    >
      <a-assets>
        <a-asset-item
          id="DelaGothicFont"
          src="コピーしたURL"
        ></a-asset-item>
      </a-assets>
      
      <!--    ground   -->
      <a-entity
        id="ground"
        geometry="primitive: circle; radius: 1;"
        position="0 -1 -4"
        rotation="-90 0 0"
        material="color: #ECECEC"
        shadow="receive: true"
      ></a-entity>

      <!--    3Dtext    -->
      <a-entity
        position="-0.5 0.2 -4"
        scale="0.3 0.3 0.3"
        material="color: #56cfe1"
        text-geometry="value: テキストを！; height: 0.3; font: #DelaGothicFont"
        shadow="receive: true"
      ></a-entity>
      
      <a-entity
        position="-1 -0.15 -4"
        scale="0.3 0.3 0.3"
        material="color: #ff6347"
        text-geometry="value: 3Dで！; height: 0.3; font: #DelaGothicFont"
        shadow="receive: true"
      ></a-entity>
      
      <a-entity
        position="-0.2 -0.5 -4"
        scale="0.3 0.3 0.3"
        material="color: #3cb371"
        text-geometry="value: 表示できます！; height: 0.3; font: #DelaGothicFont"
        shadow="receive: true"
      ></a-entity>

      <!--    lights    -->
      <a-light type="ambient" color="#ffffff"></a-light>
      <a-entity
        light="type: directional; color: #fff; castShadow:true;"
        position="0 10 10"
      ></a-entity>

      <!--    camera    -->
      <a-entity
        camera=""
        position=""
        rotation=""
        scale=""
        visible=""
      ></a-entity>
      
    </a-scene>
  </body>
</html>

参考

Github
https://github.com/supermedium/superframe/tree/master/components/text-geometry/
今回作ったプロジェクト
https://aframe-text-geometry-component.glitch.me/