Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
23
Help us understand the problem. What are the problem?

posted at

updated at

自由に移動できる3D掲示板を作った【個人開発】

はじめに

a.png

3D掲示板という3Dな掲示板を作りました。
3D空間にコメントを投稿できる掲示板です。
無料で使えます。

なんで開発したの?

Three.jsというJavaScriptの3Dライブラリを使って何か作ってみたかったのですが、横になってボーっとアイデアを考えていたら突如、この3D掲示板が浮かびました。
3D空間にコメントを投稿できるというのは、たぶんVR Chatとかだと普通なんでしょうがWebの世界ではあまり見かけないなぁと思いました。
「3D掲示板」でググってもそれらしいのはヒットしなかったので、たぶん日本初だと思います。

掲示板の使い方

キーボード操作です。↓が対応です。

  • エンター ... コメント投稿フォームの表示
  • W ... 前進
  • S ... 後退
  • D ... 右に移動
  • A ... 左に移動
  • F ... 上に移動
  • C ... 下に移動

上のキーを使うと3D空間上を自由に移動できます。
視点はコメントが見えづらくなるので固定にしてます。

エンターキーを押すとコメント投稿フォームが現れます。

b.png

コメントを書いて「投稿する」ボタンを押すとコメントが投稿されます。

c.png

書き込める文字は↓の通りです。

  • ひらがな
  • カタカナ
  • 大小英数字
  • ほか記号すこし

d.png

3D空間にしてみて面白かったところ

3D空間上にコメントが配置されるので、話題ごとにクラウドができて視覚的に面白いなぁと思いました。

e.png

3D空間内にオブジェクトなどを配置すればさらに面白くなるかもしれません。
たとえば掲示板をスレッド式にして、スレッドごとに背景を設定できるようにするとか面白いと思います。
いまのところ3D掲示板はスレッド式ではなくて単一の掲示板になっていますので、そういう仕様にする場合はカスタムが必要になりそうです。

技術的なところ

今回使った技術は↓の通りです。

  • Django
  • Django REST Framework
  • Vue
  • Three.js

なぜかSPAになっているので、Vueを使ってます。
問題としては生成されるjsファイルが重いというところです。
特にダイエットなどはしていないので1MBぐらいあります。

技術的な詳細は↓の記事をご覧ください。

おわりに

これからインターネット回線がもっと太くなれば3D掲示板などは一般的になるのでしょうか?
個人的にはVRにも興味があるのですが、なかなか手を出せずにいます。
3D掲示板、もしよかったら使ってみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
23
Help us understand the problem. What are the problem?