Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

nisshi.dev | にっし

April 08, 2023
Tweet

More Decks by nisshi.dev | にっし

Other Decks in Technology

Transcript

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide