A-Frameで日本語を表示したい
本記事は AR Advent Calendar 2019 の19日目の投稿です。
はじめに
A-Frameとは、WebAR/VRをHTMLのように書いて実装できるフレームワークです。
A-Frameで3DモデルをAR空間に表示する方法については以前「【WebAR】A-frameを使ってマーカー上に3Dモデルを表示するまで」に書いたので興味のある方はぜひ読んでみてください。
さて、A-Frameで文字を表示する場合、<a-text>
もしくは <a-entity>
を使用します。
しかし、<a-text>
は日本語に対応していません。
(<a-entity>
は使用していないのでわかりません。多分対応していないと思います!)
日本語が表示できないのは困るので調べてみたところ、
無事に日本語を表示することができたのでその方法をまとめます。
日本語を表示する方法
公式ドキュメントのNon-ASCII Charactersの項目でその方法が簡単に紹介されています。(英語)
せっかくなので、この記事で日本語で詳しく書いていきたい思います。
フォントファイルの用意
下準備は以下のようなサイトで行います。
1. 使用したいフォントのttsファイルを用意します。
2. MSDF変換ツール (↑画像のサイト)を開きます。
3. 画像の1番で、用意したttsファイルを選択します。
4. 画像の2番で、ARで使用したい文字を全て入力します。
5. 画像の3番で、 [CREATE MSDF] ボタンをクリックします。
6. 準備ができたら画像4番の [DOWNLOAD] ボタンが押せるようになります。クリックしてzipファイルをダウンロードしてください。
A-Frame用にDLしたファイルを整える
- 先ほどDLしたファイルを解凍すると、jsonファイルとpngファイルが入っています。
- pngファイルの名前を、
*.png
から*-msdf.png
にリネームしてください。
ファイルの配置
用意した2つのファイルをポーンとプロジェクトファイルに置いてやります。
project_file
├ custom-msdf.json
├ custom-msdf.png
└ index.html
コード
以下の様に記述します。
文字コードは必ずutf-8
にしてください。
<!DOCTYPE html>
<html>
<head>
<head>
<meta charset="utf-8" />
<script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
<script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script>
<title>WebAR</title>
</head>
<body>
<a-scene embedded arjs="debugUIEnabled:false; sourceType: webcam;">
<a-text
value="こんにちは世界!"
font="custom-msdf.json"
font-image="custom-msdf.png"
negate="false"
scale="2 2 1"
position="0 1 -4"
color="red">
</a-text>
</a-scene>
</body>
</html>
結果
こんな感じで表示されます。
参考サイト
さいごに
少しだけ裏話をば。
実は、当初は公式ドキュメントのコード例にはfont-image
が書いてありませんでした。
おそらくドキュメントが作成された当時は記述なしでも動作したのだと思いますが、A-Frameの現在のバージョン(0.9.2)ではfont-image
も書かないと日本語が表示されないです。
(先日v1.0.0がリリースされましたね。こちらのバージョンではまだ動作確認していません。)
なので、人生で初めて公式にPRを出しましたー!無事にマージもされています!
このアドベントカレンダーがなかったらきっとまだOSS活動をしたことのない人生を送っていたことでしょう。
この様な機会をくださったアドベントカレンダーに感謝。
それではみなさまよいARライフをお過ごしください!
Author And Source
この問題について(A-Frameで日本語を表示したい), 我々は、より多くの情報をここで見つけました https://qiita.com/emuyuu/items/df90a011d73643b8adcb著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .