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