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

Transcript

1. View Slide

2. アジェンダ
   Splineについて
   web×3DのUI表現一覧
   まとめ
   自己紹介 Web上で動作する3Dモデルを
   Splineというサービスで作って
   みる
   Reactで読み込み、実際のWeb
   ページに表示してみる
   話すこと
   

   View Slide

3. 自己紹介 -その1-
   nisshi.dev | にっし
   ＠nsd244
   「孤独からの解放を目指し、デジタル上に新しい体
   験価値をweb×3Dの技術で創造する🔥」をテーマに
   もの創りしているwebエンジニア
   サービス開発やOSS活動やコミュニティ運営をして
   いる
   「好きで生きる」
   「おもしろ駆動開発」
   

   View Slide

4. Splineとは
   Web用に簡単に3DCGを作成することができるサービス（Web・Desktopアプリ対応）
   出典：https://spline.design/
   

   View Slide

5. Splineとは
   基本的にはWeb出力用のサービスのため、Blenderの代わりではない
   出典：https://spline.design/
   

   View Slide

6. なぜSplineか
   公式がReact対応ライブラリを用意してくれてる！簡単！
   出典：https://github.com/splinetool/react-spline
   

   View Slide

7. Web×3DのUI表現一覧 -3Dテキスト-
   https://my.spline.design/web3dslide-72ecdaff609510c9a2ef73bbe637e3b3/
   既存の表現をよりリッチにする
   アニメーションがあると、ワクワクする表現になる
   ただ、逆に見にくくなってしまう場面もあるのでここぞというポイントで出すのが大
   事
   

   View Slide

8. Web×3DのUI表現一覧 -3Dルーム-
   https://my.spline.design/miniroomcopy-afc3c56277ee1cf31f638fb790c6fee5/
   空間をwebページでよりリッチに再現
   もしアニメーションがあれば、商品や利用例などがわかりやすくなる
   自己表現がよりカッコよくできる
   

   View Slide

9. Web×3DのUI表現一覧 -webページ組み込み-
   https://deploy-preview-4--nisshi-dev.netlify.app/
   

   View Slide

10. まとめ
    既存のWebサイトでのUI表現をよりリッチにできる！
    ここぞという場面で使うのがおすすめ！
    めちゃ簡単にWeb出力ができるSplineはいいぞ
    後日、この3D表現を盛り込んだポートフォリオサイトを公
    開予定...！！
    

    View Slide

11. View Slide