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
56
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
260
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
990
自己実現ピッチ
nishidayoshikatsu
1
86
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
830
Other Decks in Technology
See All in Technology
NLPコロキウム20251022_超効率化への挑戦: LLM 1bit量子化のロードマップ
yumaichikawa
2
400
ソースを読むプロセスの例
sat
PRO
15
9.9k
会社を支える Pythonという言語戦略 ~なぜPythonを主要言語にしているのか?~
curekoshimizu
3
650
Implementing and Evaluating a High-Level Language with WasmGC and the Wasm Component Model: Scala’s Case
tanishiking
0
180
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
様々なファイルシステム
sat
PRO
0
240
ハノーファーメッセ2025で見た生成AI活用ユースケース.pdf
hamadakoji
0
430
難しいセキュリティ用語をわかりやすくしてみた
yuta3110
0
380
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
FinOps について (ちょっと) 本気出して考えてみた
skmkzyk
0
210
serverless team topology
_kensh
3
210
まだ間に合う! 2025年のhono/ssg事情
watany
3
640
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Building a Scalable Design System with Sketch
lauravandoore
463
33k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
Thoughts on Productivity
jonyablonski
70
4.9k
The Pragmatic Product Professional
lauravandoore
36
7k
Navigating Team Friction
lara
190
15k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
54k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.6k
How to Think Like a Performance Engineer
csswizardry
27
2.1k
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