外食先での飲食体験をより豊かなものにする、 3Dモデルの閲覧を可能とした新感覚グルメレビューアプリ
既存の3Dスキャンアプリで作成した3Dモデルをアップロードすることで、3Dモデルの投稿を実現しています
3Dモデルを活用することで、以下のような視覚体験をすることが可能となります
f4e35fea-dd66-40c6-9ae2-3705f72175cf.mp4
ここでは詳しくは説明しないのですが、ざっくり紹介すると、スマホ一台で3Dスキャンを行うことができ、誰でも手軽にそれなりの精度の3Dモデルを作ることができます
興味を持った方はぜひ試してみてください!:
3Dスキャンアプリ ~Scaniverse~ 公式ページ
(スキャンアプリについて詳しく知りたい方は、以下の記事を参考に)
徹底解説!iPhone 3Dスキャンの撮り方全て教えます
本アプリはAR機能の習性上、モバイル端末でのみ機能を使うことができます。
[注意] 現在開発段階にあり、画像が表示されなかったり、正しく動作しない場合があります
何か問題が見つかった場合は、フォームに詳細内容を入力して送信していただけると助かります
スマホからのアクセスお願いします
デスクトップで開いている方は、モバイル端末で下記のURLにアクセスするか、QRコードを読み取ってサイトにアクセスしてください。
アプリにアクセスすると、最初にログイン画面に遷移します
ここではログイン・新規登録・ゲストログインの3つの選択肢があります.
(※ローディングに時間がかかる場合があります)
1.ゲストでログインする場合
「ログインor新規登録」ボタンの下記にあるゲストログインボタンを押すことで、ユーザー認証を行わずにログインすることが可能です
2.ログインする場合
登録したメールアドレスとパスワードを入力後、ログインボタンを押してください
ログインに成功すると、フィード画面に遷移します
3.新規で登録する場合
「アカウントを持っていない場合はこちら」というボタンを押すと、新規登録画面に切り替わります
そこでメールアドレスとパスワードを入力し、新規登録ボタンを押してください
登録に成功すると、フィード画面に遷移します
この画面では全てのユーザーの投稿一覧を閲覧することができます
(現在は投稿機能が実装できていないため、開発者の投稿のみを表示)
画像をタップすると、投稿詳細画⾯に遷移します
1.ゲストログインの場合
上部のNavbarがLoginボタンになっています
(ボタンを押すとログイン画面へ遷移します)
(※画像や3Dモデルが表示されない場合があります。その際は、再読み込みしてください) 投稿の詳細を確認することができます
1.3Dモデルが表⽰されます
※モデルの読み込み時間があります。
2.右下のアイコンを押すことで、AR画⾯へ移動します
3Dモデル閲覧の体験、モデルのアップロードを試すことができる画面です
(将来的には、3DスキャンとARを紹介するページになる予定です)
1.デフォルトではステーキのモデルが表⽰されています
2.ファイルアップロードであなたが所持しているglbファイルをアップロードすることで、そのモデルが表⽰されます
(本アプリの使い⽅については、上記に記載しています)
-
各端末に応じたページの読み込み速度
(例:次のページに遷移するまでにどれぐらい時間がかかるか)
-
3Dモデルの閲覧体験について
(例:読み込み時間、表⽰品質、操作性など)
-
画面デザインやUIについてのご意⾒
(例:投稿⼀覧画⾯で⾒たい情報や、画⾯のレイアウトなど)
-
機能追加や改善のためのアイデアや提案
(例:こんな機能がほしい、こんな⾒た⽬の⽅が⾒やすいなど)
-
バグや技術的な問題に遭遇した場合の詳細情報
下記のフォームから提出お願いします
- VSCode
- PyCharm
- Notion
- Miro
- Git/Github
フロント:TypeScript: 5.1.3
バック:Python
フロントエンド
- Next.js: 12.3.2.
- TailwindCSS: 3.3.2.
- (plugin)daisyUI:3.0.23 バックエンド
- DjangoRestFramework==3.10.0
- Django==3.0.7
フロントエンド:Vercel
バックエンド:Render
メディアファイル:GoogleCloudStorage
本アプリはAR機能を用いるため、モバイル端末でのブラウザアクセスを推奨しています (※デスクトップでもアプリケーション自体は動作しますが、ARの機能は使用できません)
3D表示・AR機能対応ブラウザ
3D表示 | AR機能 | |
---|---|---|
GoogleChrome | ⭕️ | ⭕️ |
Safari | ⭕️ | ⭕️ |
Firefox | ⭕️ | ❌ |
Microsoft Edge | ⭕️ | ❌ |
Brave | ⭕️ | ❌ |
レイアウトに関しても、現在はモバイルでの実用のみを考えて設計しています。