Zenn
♦️

3Dモデルの配布サイトを運営しています（コントリビュータも募集中です！）

2024/05/04に公開
Next.js
React
TypeScript
Three.js
#
React Three Fiber
tech

私は無料の3Dモデル配布サイト Meshmell を運営しています。

Meshmell とは

Meshmellは、無料で使える3Dモデルの配布サイトです。このサイトでダウンロードできる3Dモデルは、一部を除き、基本全てCC0（Creative Commons 0）ライセンスとなっており、無料で利用でき、商用利用も可能です。

ユーザーインターフェース

現在のほとんどの3Dモデル配布サイトは2次元のWebページを基本に構成されていますが、このウェブサイトはモデル一覧ページから、3D操作ができます。これにより、ユーザーは直感的にモデルを選んでダウンロードすることが出来ます。一覧ページは、奥行スクロール、縦スクロール、横スクロール(PCのみ)の3つのスクロールから、自分が使いやすい視点を選択できます。

使用させて頂いている3Dモデル

管理人の私も投稿しますが、CC0ライセンスで、公開しているモデルを再配布させて頂いております。以下は、そのモデル及び作者様のWebサイトです。

技術の詳細

ホスティング環境: Google Cloud Run

Cloud Run は、コンテナ化されたアプリケーションを簡単にデプロイできるサービスです。さらにアクセスが来ない時には自動でインスタンスを停止してくれるので、コストを抑えることができます。

TypeScript

TypeScriptは、JavaScriptに型システムを加えた言語です。型のサポートにより、コードの信頼性を高め、バグを事前に検出することが可能になります。大規模なプロジェクトやチームでの開発において、コードの管理と保守が容易になります。

Next.js 13

Next.jsは、Reactベースのフレームワークで、サーバーサイドレンダリング（SSR）や静的サイト生成（SSG）を簡単に行えるよう設計されています。これにより、SEO対策やパフォーマンスの最適化が容易になります。

Tailwind CSS

Tailwind CSSは、開発速度の向上のために導入しました。

Three.js

Three.jsは、WebGLを使用して3DコンテンツをWebブラウザで描画するためのJavaScriptライブラリです。このライブラリを使用することで、複雑な3Dシーンやアニメーションを、比較的簡単に実装できます

React Three Fiber

React Three Fiberは、Three.jsの機能をReactのコンポーネントとして利用できるようにするライブラリです。

コントリビュータを募集しております。

現在、自力での解決が難しいバグ、修正案件がいくつか存在し、皆さんのお力添えを頂きたいです。もしご興味がございましたら、コントリビュータとしてプロジェクトに参加していただけると幸いです。詳細情報はGitHubのIssuesセクションでご確認いただけます。文章は全て英語で記載されていますので、予めご了承ください。

サイトURL: https://meshmell.com/ja
Repository: https://github.com/meshmell/meshmell.com
Issues: https://github.com/meshmell/meshmell.com/issues

Discussion