動画

3D空間上にPlayCanvasで文字を表示する

「あけおめ」メッセージを追加をします。あけおめメッセージを追加するにはフォントとスクリーンを作ること作ることができます。
PlayCanvasでは.ttf形式のフォントを使用することが出来るので、その形式のフォントを使用します

M Plusフォントをダウンロード
mplus-1m-bold.ttfをドラッグアンドドロップでPlayCanvasのエディター上にアップロードします。
フォントに日本語を対応させる

アップロードしたフォントをASSETからクリックすると、FONT → Charactersに使用したい文字列を追加して、Process Fontをクリックします。文字列を一度に追加したい場合は16進数で指定した、RANGEで追加もできます。

日本語を使用するための準備これでできました。次からはフォントをゲーム画面（AR)に表示出来るようにします。

HIERARCHYの中から　→　➕　→　User Interface →　2D Screenを追加します。

2DScreenを使用することでカメラの影響を受けない配置が可能になります。

a. HIERARCHYから2D Screenを選択
b. ➕　→　User Interface → Text Elementを追加

これで2D Screenの中にText Elementを追加することができました。

Text Elementを選択肢　→　ELEMENT　→　Fontの中に先程設定した M Plusのフォントを追加します。

これでPlayCanvasエディター上で文字を表示することが出来るようになりました。

PlayCanvasではFbx, Objについてはドラッグアンドドロップすることで使用することができます。

3Dモデルをダウンロードする
3Dモデルをダウンロードするのには Google Polyなどは可愛い動物などのモデルが比較的自由に利用可能なモデルが配布されています。

FBX, OBJ形式の、3DモデルについてはPlayCanvasにドラッグアンドドロップをすることで配置することができます。

FBX, OBJ形式でテクスチャがうまく反映されない場合にはBlenderなどの3Dのソフトウェアで設定して保存し直すと反映されるようになります。

PlayCanvasでエフェクトを使用するにはParticle Systemを追加します。

このようなエフェクトは簡単に作れます。作り方についてはこちらが参考になります。

前回の記事と今回の記事を合わせることでリッチなARコンテンツを作れるようになります。
PlayCanvasはARToolKitの他にも8thwallというWebARのライブラリに対応していますので他のコンテンツもご覧ください

入門

応用

その他の記事はこちらになります。

少しでも興味がありましたら、ユーザー同士で解決・PlayCanvasを推進するためのSlackを作りましたので、もしよろしければご参加ください！