4つのポイント
- Blenerでテキスト入力モード切り替えはTab
- 日本語フォントを設定すれば日本語の入力も可能
- 何故か入力できないときはテキストエディタからコピペで入力
- objファイルであれば楽々A-Frameで表示できた
傷口から痛いのが飛んでいくAR絆創膏を作りました。 pic.twitter.com/j67S3y4dOl
— 君塚史高 (@ki_230) 2020年12月8日
「痛いの痛いの飛んで行けAR」を作ったのですが、「痛いの」というテキストを3Dモデルにするのに若干手間取りました。
日本語ではなく英語のテキストで良いのであれば、aframe-text-geometry-componentたるライブラリを使えば楽々なのですが、残念ながらaframe-text-geometry-componentは日本語に対応していません。
2Dのテキストで良ければ、迷わずCanvasをテクスチャにしますし、内部はThree.jsなのでTextGeometryをうまいこと使えば日本語も3Dにできる気がしてならないのですが、今回はテキストを動的に差し替えることもないので、さくっとBlenderでモデリングすることにしました。
が。Blenderでも日本語を使うために、若干設定をしなければならなかったので手順をまとめておきます。
Blenderでテキストにフォントを設定し日本語を入力し押出しで立体にする
❶「Add」>「Text」でテキストを追加
❷ フォントに日本語フォントを設定（今回だとNoto Sans JP）
❸ tabキーを押してテキスト編集モードに入る
❹ 何故か日本語を入力できないので、テキストエディタとかに入力内容を一度記載しコピペで入力
❺ GeometryやBevelを設定して立体感を出す
といった流れです。
objファイルとして書き出す
当初はglbファイルで書き出そうと思ったのですが、何故かA-Frameで読み込めず、ビューアーで試しても表示されないので諦めました。
objファイルで書き出したところ、あっさりとA-Frameで読み込めたので、今回は詳細は調査せず、それでよしとしました。
