前へ  |  次へ 

Three.jsで「3D掲示板」を作った話【Django】

342, 2021-11-01

目次

Three.jsで「3D掲示板」を作った

DjangoとThree.jsを使って「3D掲示板」を作りました。
↓のリンクから使うことができます。

bbs3d

仕様としては、3D空間にユーザーの投稿したコメントが表示されるというものです。
ユーザーは3D空間を自由に移動出来て、好きな場所にコメントをすることができます。
キーボードの操作のみの対応で、Wキーで前進、Sキーで後退、Dキーで右に移動、Aキーで左に移動、Fキーで上に移動、Cキーで下に移動、エンターキーでコメント送信フォームを表示できます。

操作としてはいたってシンプルな作りになっています。
WSDAFCキーで好きな場所に移動して、エンターキーでフォームを表示してコメントを書いて投稿する、というのがおもな使い方になります。

3D空間に自由にコメントを投稿できるので、普通の掲示板と比べて開放感があるかもしれません。

開発ツールについて

以下のツールで開発しました。

  • Django
  • Bootstrap
  • Vue
  • Vuex
  • Three.js

Djangoはサーバーサイドのフレームワークです。
VueへのAPIの定義はDjangoで行っています。
コメントの取得と作成もDjangoの仕事です。

BootstrapはCSSフレームワークです。
アプリのデザインはおもにBootstrapで行っています。

Vueはクライアントサイドのライブラリです。
3D掲示板はSPAですが、これはVueで構築しています。
Vueで構築したJavaScriptからDjangoのAPIにリクエストを投げて、コメントを取得したり作成したりしています。

VuexはVueで使うライブラリで、グローバルな状態を定義したい時に使います。
3D掲示板ではThree.jsとVueのあいだでデータのやり取りが必要になりますが、このデータのやり取りにVuexを使っています。

Three.jsは3Dグラフィック・ライブラリです。
3D部分はすべてThree.jsで作成しています。

開発の話

フォントをThree.jsで表示させるのが今回のアプリの主要なテーマでした。
さいわいThree.jsにはTextGeometryTextBufferGeometryといった専用のジオメトリが存在し、これを使うことで簡単にテキストを作成することができます。
このジオメトリとマテリアルを組み合わせてメッシュにして、そのメッシュをシーンに配置することでテキストが3D空間上に配置されます。

今回、いちばんネックだったのがフォントの準備でした。
Three.jsにはいくつか標準で用意されているフォントがあり、これはjsonファイルとして定義されています。
JSONファイルの中にはフォントのベクタが定義されていて、Three.jsはこのベクタをパースしてフォントを作成します。

つまり普通のフォントを使うには、いったんJSONファイルに変換する必要があります。
この変換には↓のサイトを使いました。

Facetype.jsはフォントファイルをJSONファイルに変換することが出来るサイトです。

Three.jsの標準フォントは日本語を扱うことができないため、日本語を表示したい場合は自前でフォントのJSONファイルを用意する必要があります。
今回は「やさしさゴシック」フォントを使うことにしました。

しかし、感じなどが含まれるフォントファイルをJSONに変換すると、ファイルサイズが数MBになってしまいます。
これはアプリ数個分にもおよぶ容量です。
そこで今回は漢字の表示は諦めて、ひらがな・カタカナ・英数字のみの対応としました。

既存のフォントファイルから、特定の文字列のみを抜き出して別のフォントファイルを作成するには↓のツールが使えます。

(参考: Three.js TextGeometry(3D文字)で日本語を使う - Qiita)

サブセットフォントメーカーでやさしさゴシックからひらがな・カタカナ・英数字のみを抜き出してフォントファイルを作り、それとFacetype.jsを使ってJSONファイルを作成します。
こうすることで容量を170KBぐらいまで抑えることに成功しました。

速度とメモリの話

開発では当初、TextGeometryを使ってテキストを描画していました。
しかし、TextGeometryよりもTextBufferGeometryのほうが軽いという情報を手に入れたので、TextBufferGeometryに置き換えました。

3D掲示板が一度に表示できるコメントは100個ほどですが、TextGeometryを使っていた場合、よく「Out of memory」となってメモリが不足しました。
TextGeometryの設定を調整して、テキストの装飾を少なくするんですが、それでも筆者のパソコンでは60個ほどのテキストを表示しただけでメモリが不足しました。

3Dのテキストの描画はけっこうコストがかかるみたいです。

そこでTextBufferGeometryに置き換えてみると、速度が上がり、メモリ不足も発生しなくなりました。
(ちなみに筆者のパソコンのメモリは16GBあります)

設計の話

3D掲示板はシンプルにノースレッドな掲示板になっています。
定義してるモデルはコメントだけです。
また一度に表示できるコメントも最新の100件だけになっています。

PVが出たらマルチスレッド形式の掲示板も開発するかもしれません。

おわりに

Three.jsを使うと簡単に3Dアプリを作ることができます。
みなさんも良かったら使ってみてください。
3D掲示板もよろしくお願いします。

 前へ  |  次へ 

スポンサーリンク

スポンサーリンク

スポンサーリンク

スポンサーリンク