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
51
WebXRとは何か
nishidayoshikatsu
0
28
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
44
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
220
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
770
自己実現ピッチ
nishidayoshikatsu
1
79
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
740
Other Decks in Technology
See All in Technology
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
540
スキルだけでは満たせない、 “組織全体に”なじむオンボーディング/Onboarding that fits “throughout the organization” and cannot be satisfied by skills alone
bitkey
0
170
あなたが人生で成功するための5つの普遍的法則 #jawsug #jawsdays2025 / 20250301 HEROZ
yoshidashingo
2
280
「正しく」失敗できる チームの作り方 〜リアルな事例から紐解く失敗を恐れない組織とは〜 / A team that can fail correctly
i35_267
5
860
NFV基盤のOpenStack更新 ~9世代バージョンアップへの挑戦~
vtj
0
350
Oracle Database Technology Night #87-1 : Exadata Database Service on Exascale Infrastructure(ExaDB-XS)サービス詳細
oracle4engineer
PRO
1
170
Two Blades, One Journey: Engineering While Managing
ohbarye
4
1.9k
"TEAM"を導入したら最高のエンジニア"Team"を実現できた / Deploying "TEAM" and Building the Best Engineering "Team"
yuj1osm
1
130
LINEギフトにおけるバックエンド開発
lycorptech_jp
PRO
0
260
Aurora PostgreSQLがCloudWatch Logsに 出力するログの課金を削減してみる #jawsdays2025
non97
1
190
データベースの負荷を紐解く/untangle-the-database-load
emiki
2
500
Visualize, Visualize, Visualize and rclone
tomoaki0705
9
82k
Featured
See All Featured
A designer walks into a library…
pauljervisheath
205
24k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Java REST API Framework Comparison - PWX 2021
mraible
29
8.4k
Building an army of robots
kneath
303
45k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.7k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
For a Future-Friendly Web
brad_frost
176
9.6k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
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