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
110
Web×3DのUI表現を模索してみる話
nisshi.dev | にっし
April 08, 2023
Tweet
Share
More Decks by nisshi.dev | にっし
See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
nishidayoshikatsu
0
33
WebXRとは何か
nishidayoshikatsu
0
17
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
27
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
160
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
490
自己実現ピッチ
nishidayoshikatsu
1
71
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
670
Other Decks in Technology
See All in Technology
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
セキュリティ研修 Day1【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Luupの開発組織におけるインシデントマネジメントの変遷 ver.RoadtoSRENEXT2024
grimoh
1
270
LINE WORKSへ簡単通知!Incoming Webhookアプリの紹介
mmclsntr
0
110
AOAI Dev Day LLMシステム開発 Tips集
hirosatogamo
15
3.7k
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
Classmethod Odyssey 登壇資料
yamahiro
0
390
ACRiルーム最新情報とAMD GPUサーバーのご紹介
anjn
0
150
Scaling Technical Excellence at 104: Evolution in AWS and Developer Empowerment
scotthsieh825
1
150
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
JBUG岡山 #6 WordCamp男木島の チームビルディング
takeshifurusato
0
150
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Robots, Beer and Maslow
schacon
PRO
157
8.1k
Art, The Web, and Tiny UX
lynnandtonic
291
20k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
How GitHub (no longer) Works
holman
305
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
15
4.9k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Fantastic passwords and where to find them - at NoRuKo
philnash
42
2.7k
Raft: Consensus for Rubyists
vanstee
134
6.5k
Building Applications with DynamoDB
mza
89
5.8k
Happy Clients
brianwarren
94
6.5k
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