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
980
自己実現ピッチ
nishidayoshikatsu
1
86
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
820
Other Decks in Technology
See All in Technology
生成AIを活用したZennの取り組み事例
ryosukeigarashi
0
200
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
77k
extension 現場で使えるXcodeショートカット一覧
ktombow
0
210
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
140
Goに育てられ開発者向けセキュリティ事業を立ち上げた僕が今向き合う、AI × セキュリティの最前線 / Go Conference 2025
flatt_security
0
350
実装で解き明かす並行処理の歴史
zozotech
PRO
1
320
pprof vs runtime/trace (FlightRecorder)
task4233
0
160
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
340
ZOZOのAI活用実践〜社内基盤からサービス応用まで〜
zozotech
PRO
0
170
How to achieve interoperable digital identity across Asian countries
fujie
0
110
Why Governance Matters: The Key to Reducing Risk Without Slowing Down
sarahjwells
0
110
SwiftUIのGeometryReaderとScrollViewを基礎から応用まで学び直す:設計と活用事例
fumiyasac0921
0
140
Featured
See All Featured
Context Engineering - Making Every Token Count
addyosmani
5
180
Rails Girls Zürich Keynote
gr2m
95
14k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
What's in a price? How to price your products and services
michaelherold
246
12k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
The World Runs on Bad Software
bkeepers
PRO
71
11k
For a Future-Friendly Web
brad_frost
180
9.9k
Facilitating Awesome Meetings
lara
56
6.6k
Producing Creativity
orderedlist
PRO
347
40k
Making Projects Easy
brettharned
119
6.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.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