3Dモデル共有プラットフォーム「Inside The Cocoon / Z-Space」をチーム開発
進級制作にて、3Dモデルを閲覧・共有できるWebプラットフォーム
「Inside The Cocoon / Z-Space」 をチームで開発しました。
このサービスは、
作品制作 → 宣伝 → 発見 → 購入 → 依頼
までの流れを、サイト上で完結できる仕組みを目指しています。
クリエイターは3Dモデルをアップロードすると、その場でSNSへ投稿でき、
自分の作品を宣伝することができます。
ユーザーはSNSから作品を発見し、
気になった作品があればそのまま商品ページへ移動して
詳細を確認・購入することが可能です。
また、ユーザーは Request投稿機能 を使うことで、
クリエイターに対して3Dモデル制作の依頼を行うこともできます。
このように、
制作・共有・宣伝・販売・依頼までを一つのサービス内で完結できる構造
を設計しています。
3D閲覧機能
商品一覧ページでは Three.js を用いた軽量な3Dプレビューを表示し、
ブラウザ上でスムーズにモデルを確認できる構成にしています。
さらに詳細ページでは Unity WebGL を利用し、
より高品質な3Dビューアでテクスチャや質感を確認できる仕組みを実装しています。
Unityビューア自体はチームメンバーが制作し、
私は Web側との統合 を担当しました。
一部機能は未完成ですが、
フェイストラッキング機能は動作可能 な状態です。
技術構成
Next.js を中心に、
- Three.js
- Unity WebGL
- Clerk（認証）
- Neon（DB）
- Azure Blob Storage（3Dデータ）
- Cloudflare Workers
などを組み合わせ、
3D作品をWeb上で扱えるサービスとして開発しています。
担当
私は本プロジェクトにおいてチームリーダーとして、
フロントエンドおよびバックエンドの実装、
ならびにWebアプリケーションとUnityビューアの統合を担当しました
また、システム全体設計に基づき、
各機能が連携して一つのサービスとして成立するよう、
実装レベルでの最適化および調整を行いました。
今回の試み
進級制作では、今回初めて学科内だけで完結するのではなく、
CG学科と連携し、3Dモデルを提供してもらう形でのコラボレーションを実現しました。
他学科のクリエイターが制作した3D作品を本サービスに掲載し、
実際にWeb上で閲覧・共有できる形にすることで、
学校内のクリエイティブを横断的につなぐ取り組みとなりました。
結果として、本プロジェクトは
学校内で初めての他学科連携による制作プロジェクトとなりました。
現在の開発状況
現在はSNS機能の拡張を進めており、
- コメント機能（開発中）
- コレクション機能（開発中）
などを追加しています。
※本プロジェクトで使用している3Dモデルの一部は、
CG学科の学生から提供いただいたもの、
および公開されている3Dモデル素材を利用しています。
それぞれの利用条件およびライセンスに基づき使用しており、
本ポートフォリオでは展示目的で掲載しています。
一部のモデルについては、権利の都合上ダウンロード不可としています
