説明

Nuxt3系でサイトを制作し、レスポンシブと一部翻訳を実装しています。
使用している画像はフリー素材とAI合成で出力しています。

https://ramen.hashimoto-p.work

拉麺屋のサイトをあまり見ることがないのですが、
どこかのサイトがのれんを表現していて、面白そうだったので作ってみました。
実装したら鬱陶しかったのでやめました。

Three.jsとCannon.jsとSimpleNoiseでクラスベースのコードを作ってみました。
どこかで流用できるといいです。

※動画内のメールクライアントは個人情報の兼ね合いで一部編集しています。

仕様の説明

会員登録ができ、メモを作成できる。
かつ、メモはタグ機能があり、検索機能がある。

・BackEndはPythonを利用
・FrontEndはNuxt3系を利用
・DBはMySQL

となります。
EndPoint作成にはFlask、検索はSQLAlchemyでの全文検索をなんとなく入れてみました。
会員登録はパスワード認証と、メールによる認証を行なっています。

感想

Flaskは記述量が少なく、便利さを実感しました。
仕事ではWordpressやCMSがメインとなるためPHP利用が多く、利用機会がないので残念です。

今回は、比較的簡単なキノコを題材にしました。
もともとShade3D(ニッチソフト)での制作を行っていたので、モデリングとテクスチャ作成は容易でした。
エクスポートは椎茸だけ行いましたが、余力で皿なども作成しました↓

テクスチャやUV、エクスポート形式など様々な検証を行い、目的は達成できましたが、
ちょっと勿体無いので、簡単にサイト全体の構築を行っています。

Webは、Vite + Vue / Threeを使用して構築をしました。
椎茸に関する知見も無く、素材もフリー素材ばかりのため全体の品質は低いですが、良い経験だったと思います。

https://shiitake.hashimoto-p.work/
テクスチャのデータ量が重いので、wifiでの閲覧を推奨します。