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
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
Performance Insights 廃止から Database Insights 利用へ/transition-from-performance-insights-to-database-insights
emiki
0
150
Escaping_the_Kraken_-_October_2025.pdf
mdalmijn
0
160
AWS 잘하는 개발자 되기 - AWS 시작하기: 클라우드 개념부터 IAM까지
kimjaewook
0
130
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
170
JAZUG 15周年記念 × JAT「AI Agent開発者必見:"今"のOracle技術で拡張するAzure × OCIの共存アーキテクチャ」
shisyu_gaku
1
150
カンファレンスに託児サポートがあるということ / Having Childcare Support at Conferences
nobu09
1
520
後進育成のしくじり〜任せるスキルとリーダーシップの両立〜
matsu0228
7
3.2k
OCI Network Firewall 概要
oracle4engineer
PRO
2
7.8k
セキュアな認可付きリモートMCPサーバーをAWSマネージドサービスでつくろう! / Let's build an OAuth protected remote MCP server based on AWS managed services
kaminashi
3
280
衛星画像超解像化によって実現する2D, 3D空間情報の即時生成と“AI as a Service”/ Real-time generation spatial data enabled_by satellite image super-resolution
lehupa
0
130
Developer Advocate / Community Managerなるには?
tsho
0
120
Featured
See All Featured
Typedesign – Prime Four
hannesfritz
42
2.8k
RailsConf 2023
tenderlove
30
1.2k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
The Pragmatic Product Professional
lauravandoore
36
6.9k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why Our Code Smells
bkeepers
PRO
339
57k
Mobile First: as difficult as doing things right
swwweet
224
10k
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Building Better People: How to give real-time feedback that sticks.
wjessup
369
20k
A Tale of Four Properties
chriscoyier
160
23k
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