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

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

Avatar for nisshi.dev | にっし nisshi.dev | にっし
April 08, 2023
Technology
0
140

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

Avatar for nisshi.dev | にっし

nisshi.dev | にっし

April 08, 2023
Tweet

More Decks by nisshi.dev | にっし

See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
79
WebXRとは何か
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
45
nisshi.dev 自己紹介スライド v0.1
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
64
「孤独からの解放」 を目指してShareBrowseを開発している話
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
270
Code_for_Yamaguchiの今までとこれから
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
1.1k
自己実現ピッチ
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
93
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
880

Other Decks in Technology

See All in Technology
#23 Turing × atmaCup 2nd 6th Place Solution + 取り組み方紹介
Avatar for yumizu yumizu
0
140
ECSネイティブのBlue/Green デプロイを攻略しよう ~CodeDeployとの違いから、デプロイフロー実装まで~
Avatar for 井手亮太 ideaws
3
280
衛星画像即時マッピングサービスの実現に向けて
Avatar for Yuji Kobayashi lehupa
1
280
今、求められるデータエンジニア
Avatar for Yuta Ozaki waiwai2111
2
890
『誰の責任？』で揉めるのをやめて、エラーバジェットで判断するようにした ～感情論をデータで終わらせる、PMとエンジニアの意思決定プロセス～
Avatar for coconala_engineer coconala_engineer
0
860
StrandsAgentsで構築したAIエージェントにMCP Apps機能を追加してみた
Avatar for たけのこ kmiya84377
0
130
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
Avatar for Cybozu cybozuinsideout
PRO
10
74k
30分でわかるアーキテクチャモダナイゼーション
Avatar for nwiizo nwiizo
4
2.4k
ブログの作成に音声AIツールを使って音声入力しようとした話
Avatar for Makky12 smt7174
1
120
AIで「ふとした疑問」を即座に検証する 〜定量で圧倒するN1理解〜
Avatar for KAKEHASHI kakehashi
PRO
2
410
Cloud Runでコロプラが挑む 生成AI×ゲーム『神魔狩りのツクヨミ』の裏側
Avatar for COLOPL Inc. colopl
0
440
「技術的にできません」を越えて価値を生み出せ──研究開発チームをPMが率いて生み出した価値創出
Avatar for Takahiro Yamaguchi hiro93n
1
120

Featured

See All Featured
New Earth Scene 8
Avatar for Sydney Stone popppiees
1
1.6k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3k
Evolving SEO for Evolving Search Engines
Avatar for Ryan Jones ryanjones
0
140
Why Mistakes Are the Best Teachers: Turning Failure into a Pathway for Growth
Avatar for Umar Saidu Auna auna
0
65
Redefining SEO in the New Era of Traffic Generation
Avatar for Szymon szymonslowik
1
230
More Than Pixels: Becoming A User Experience Designer
Avatar for Michelle Schulp Hunt marktimemedia
3
330
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
1.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
Avatar for Rebecca Miller-Webster rmw
35
3.4k
The AI Search Optimization Roadmap by Aleyda Solis
Avatar for Aleyda Solis aleyda
1
5.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
74
11k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.4k

Transcript

  1. None

  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表現を盛り込んだポートフォリオサイトを公 開予定...！！

  11. None