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
130
Web×3DのUI表現を模索してみる話
nisshi.dev | にっし
April 08, 2023
Tweet
Share
More Decks by nisshi.dev | にっし
See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
nishidayoshikatsu
0
60
WebXRとは何か
nishidayoshikatsu
0
33
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
54
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
250
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
970
自己実現ピッチ
nishidayoshikatsu
1
86
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
820
Other Decks in Technology
See All in Technology
Findy Team+のSOC2取得までの道のり
rvirus0817
0
230
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
170
C# 14 / .NET 10 の新機能 (RC 1 時点)
nenonaninu
1
1.2k
pprof vs runtime/trace (FlightRecorder)
task4233
0
140
入門 FormObject / An Introduction to FormObject #kaigionrails
expajp
2
1.4k
#普通の文系サラリーマンチャレンジ 自分でアプリ開発と電子工作を続けたら人生が変わった
tatsuya1970
0
750
バイブコーディングと継続的デプロイメント
nwiizo
2
350
Green Tea Garbage Collector の今
zchee
PRO
2
350
KMP の Swift export
kokihirokawa
0
110
Windows で省エネ
murachiakira
0
140
Goのビルドシステムの変遷 / The history of Go's build system
ymotongpoo
12
3.4k
Azure SynapseからAzure Databricksへ 移行してわかった新時代のコスト問題!?
databricksjapan
0
110
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
462
33k
4 Signs Your Business is Dying
shpigford
185
22k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Fireside Chat
paigeccino
40
3.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
880
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Thoughts on Productivity
jonyablonski
70
4.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Designing Experiences People Love
moore
142
24k
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