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
57
WebXRとは何か
nishidayoshikatsu
0
32
nisshi.dev 自己紹介スライド v0.1
nishidayoshikatsu
0
52
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
250
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
930
自己実現ピッチ
nishidayoshikatsu
1
85
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
810
Other Decks in Technology
See All in Technology
モダンフロントエンド 開発研修
recruitengineers
PRO
2
300
人と組織に偏重したEMへのアンチテーゼ──なぜ、EMに設計力が必要なのか/An antithesis to the overemphasis of people and organizations in EM
dskst
5
610
つくって納得、つかって実感! 大規模言語モデルことはじめ
recruitengineers
PRO
20
5.4k
TypeScript入門
recruitengineers
PRO
12
2.7k
小さなチーム 大きな仕事 - 個人開発でAIをフル活用する
himaratsu
0
120
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
Webアクセシビリティ入門
recruitengineers
PRO
1
240
ソフトウェア エンジニアとしての 姿勢と心構え
recruitengineers
PRO
2
670
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
5
1.6k
Backboneとしてのtimm2025
yu4u
4
1.5k
キャリアを支え組織力を高める「多層型ふりかえり」 / 20250821 Kazuki Mori
shift_evolve
PRO
2
300
Understanding Go GC #coefl_go_jp
bengo4com
0
1.1k
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
184
22k
A Tale of Four Properties
chriscoyier
160
23k
Statistics for Hackers
jakevdp
799
220k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
The Invisible Side of Design
smashingmag
301
51k
Speed Design
sergeychernyshev
32
1.1k
What's in a price? How to price your products and services
michaelherold
246
12k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Visualization
eitanlees
147
16k
Automating Front-end Workflow
addyosmani
1370
200k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
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