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
51
「孤独からの解放」 を目指してShareBrowseを開発している話
nishidayoshikatsu
0
250
Code_for_Yamaguchiの今までとこれから
nishidayoshikatsu
0
920
自己実現ピッチ
nishidayoshikatsu
1
85
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
nishidayoshikatsu
1
810
Other Decks in Technology
See All in Technology
Amazon Q Developerを活用したアーキテクチャのリファクタリング
k1nakayama
2
180
【OptimizationNight】数理最適化のラストワンマイルとしてのUIUX
brainpadpr
1
230
Kiroから考える AIコーディングツールの潮流
s4yuba
4
660
Claude Codeは仕様駆動の夢を見ない
gotalab555
11
1.9k
風が吹けばWHOISが使えなくなる~なぜWHOIS・RDAPはサーバー証明書のメール認証に使えなくなったのか~
orangemorishita
15
5.5k
反脆弱性(アンチフラジャイル)とデータ基盤構築
cuebic9bic
2
160
Claude Codeが働くAI中心の業務システム構築の挑戦―AIエージェント中心の働き方を目指して
os1ma
9
1.5k
金融サービスにおける高速な価値提供とAIの役割 #BetAIDay
layerx
PRO
1
720
MCP認可の現在地と自律型エージェント対応に向けた課題 / MCP Authorization Today and Challenges to Support Autonomous Agents
yokawasa
5
1.8k
家族の思い出を形にする 〜 1秒動画の生成を支えるインフラアーキテクチャ
ojima_h
1
400
ホリスティックテスティングの右側も大切にする 〜2つの[はか]る〜 / Holistic Testing: Right Side Matters
nihonbuson
PRO
0
580
データエンジニアがクラシルでやりたいことの現在地
gappy50
3
850
Featured
See All Featured
How GitHub (no longer) Works
holman
314
140k
Into the Great Unknown - MozCon
thekraken
40
2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.4k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Building Flexible Design Systems
yeseniaperezcruz
328
39k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
How to Think Like a Performance Engineer
csswizardry
25
1.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
420
The World Runs on Bad Software
bkeepers
PRO
70
11k
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