Web×3DのUI表現を模索してみる話

Transcript

2. アジェンダ Splineについて web×3DのUI表現一覧 まとめ 自己紹介 Web上で動作する3Dモデルを Splineというサービスで作って みる Reactで読み込み、実際のWeb ページに表示してみる 話すこと
3. 自己紹介 -その1- nisshi.dev | にっし ＠nsd244 「孤独からの解放を目指し、デジタル上に新しい体 験価値をweb×3Dの技術で創造する🔥」をテーマに もの創りしているwebエンジニア サービス開発やOSS活動やコミュニティ運営をして いる 「好きで生きる」 「おもしろ駆動開発」
4. Splineとは Web用に簡単に3DCGを作成することができるサービス（Web・Desktopアプリ対応） 出典：https://spline.design/
5. Splineとは 基本的にはWeb出力用のサービスのため、Blenderの代わりではない 出典：https://spline.design/
6. なぜSplineか 公式がReact対応ライブラリを用意してくれてる！簡単！ 出典：https://github.com/splinetool/react-spline
7. Web×3DのUI表現一覧 -3Dテキスト- https://my.spline.design/web3dslide-72ecdaff609510c9a2ef73bbe637e3b3/ 既存の表現をよりリッチにする アニメーションがあると、ワクワクする表現になる ただ、逆に見にくくなってしまう場面もあるのでここぞというポイントで出すのが大 事
8. Web×3DのUI表現一覧 -3Dルーム- https://my.spline.design/miniroomcopy-afc3c56277ee1cf31f638fb790c6fee5/ 空間をwebページでよりリッチに再現 もしアニメーションがあれば、商品や利用例などがわかりやすくなる 自己表現がよりカッコよくできる
9. Web×3DのUI表現一覧 -webページ組み込み- https://deploy-preview-4--nisshi-dev.netlify.app/
10. まとめ 既存のWebサイトでのUI表現をよりリッチにできる！ ここぞという場面で使うのがおすすめ！ めちゃ簡単にWeb出力ができるSplineはいいぞ 後日、この3D表現を盛り込んだポートフォリオサイトを公 開予定...！！