Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Web×3DのUI表現を模索してみる話
Search
nisshi.dev | にっし
April 08, 2023
Technology
0
110
Web×3DのUI表現を模索してみる話
nisshi.dev | にっし
April 08, 2023
Tweet
Share
More Decks by nisshi.dev | にっし
See All by nisshi.dev | にっし
WebXRとは何か
nishidayoshikatsu
0
10
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
18
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
150
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
390
自己実現ピッチ
nishidayoshikatsu
1
60
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
640
Other Decks in Technology
See All in Technology
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
100
Garoon 開発チーム / Garoon development team
cybozuinsideout
PRO
2
2.9k
HEXA OSINT CTF V3 作戦会議
meow_noisy
0
110
社内勉強会運営のコツ
senoo
6
1.2k
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
260
Reducing Cross-Zone Egress at Spotify with Custom gRPC Load Balancing Recap
koh_naga
0
140
現代CSSフレームワークの内部実装とその仕組み
poteboy
6
1.8k
株式会社EventHub・エンジニア採用資料
eventhub
0
1.9k
インシデントレスポンスのライフサイクルを廻すポイントってなに / Pinpoints of Incidentresponse Lifecycle for Operation
sakaitakeshi
1
300
Vertex AI を中心に 生成AIのアップデートを共有します
kaz1437
0
150
Next'24 事例セッションの紹介とクラウド資格を活用したキャリア形成について語りMuscle
yasumuusan
1
350
長期運用プロジェクトでのMySQLからTiDB移行の検証
colopl
2
690
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
318
37k
Mobile First: as difficult as doing things right
swwweet
216
8.6k
Art, The Web, and Tiny UX
lynnandtonic
288
19k
Web development in the modern age
philhawksworth
202
10k
jQuery: Nuts, Bolts and Bling
dougneiner
59
7.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
20
1.6k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Into the Great Unknown - MozCon
thekraken
10
980
Faster Mobile Websites
deanohume
297
30k
Making Projects Easy
brettharned
108
5.5k
Being A Developer After 40
akosma
56
580k
Ruby is Unlike a Banana
tanoku
96
10k
Transcript
None
アジェンダ 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表現を盛り込んだポートフォリオサイトを公 開予定...!!
None