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
120
Web×3DのUI表現を模索してみる話
nisshi.dev | にっし
April 08, 2023
Tweet
Share
More Decks by nisshi.dev | にっし
See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
nishidayoshikatsu
0
50
WebXRとは何か
nishidayoshikatsu
0
27
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
44
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
200
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
740
自己実現ピッチ
nishidayoshikatsu
1
79
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
740
Other Decks in Technology
See All in Technology
DeepSeek on AWS
hariby
1
170
自動と手動の両輪で開発するデータクレンジング
estie
2
110
日本語プログラミングとSpring Bootアプリケーション開発 #kanjava
yusuke
2
370
アンチパターンのアーキテクチャと組織 / Anti-Pattern Software Architecture and Organization
oztick139
0
120
High Performance PHP
cmuench
0
110
カスタムインストラクションでGitHub Copilotをカスタマイズ!
07jp27
8
1.3k
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
400
panicを深ぼってみる
kworkdev
PRO
2
160
Kubernetesでメールの大量配信をしている話/k8sjp-20250205
hfukamachi
0
190
Autify Company Deck
autifyhq
2
41k
Enhancing SRE Using AI
yoshiiryo1
1
400
ObservabilityCON on the Road Tokyoの見どころ
hamadakoji
0
240
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
30
2.1k
For a Future-Friendly Web
brad_frost
176
9.5k
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
20
3.1k
Automating Front-end Workflow
addyosmani
1367
200k
Facilitating Awesome Meetings
lara
51
6.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
4 Signs Your Business is Dying
shpigford
182
22k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
11
910
Scaling GitHub
holman
459
140k
Fireside Chat
paigeccino
34
3.2k
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