Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web×3DのUI表現を模索してみる話

Avatar for nisshi.dev | にっし nisshi.dev | にっし
April 08, 2023
Technology
0
130

 Web×3DのUI表現を模索してみる話

Avatar for nisshi.dev | にっし

nisshi.dev | にっし

April 08, 2023
Tweet

More Decks by nisshi.dev | にっし

See All by nisshi.dev | にっし
高専ロボコンから始まった私のもの創り
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
59
WebXRとは何か
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
33
nisshi.dev 自己紹介スライド v0.1
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
54
「孤独からの解放」 を目指してShareBrowseを開発している話
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
250
Code_for_Yamaguchiの今までとこれから
Avatar for nisshi.dev | にっし nishidayoshikatsu
0
950
自己実現ピッチ
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
86
PyCon Kyushu 2022「Python で gRPC 入門 ~ chat を実装してみるハンズオン~」
Avatar for nisshi.dev | にっし nishidayoshikatsu
1
820

Other Decks in Technology

See All in Technology
OCI Oracle Database Services新機能アップデート(2025/06-2025/08)
Avatar for oracle4engineer oracle4engineer
PRO
0
110
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
Avatar for Arthur arthur1
1
800
会社紹介資料 / Sansan Company Profile
Avatar for Sansan, Inc. sansan33
PRO
6
380k
複数サービスを支える マルチテナント型 Batch MLプラットフォーム
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
310
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
Avatar for you（@youtoy） you
PRO
0
100
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
Avatar for TomoyaIwata iwatatomoya
1
880
初めてAWSを使うときのセキュリティ覚書〜初心者支部編〜
Avatar for cm-usuda-keisuke cmusudakeisuke
1
240
データアナリストからアナリティクスエンジニアになった話
Avatar for hatsu hiyokko_data
2
440
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
Avatar for kawabeaver kawabeaver
0
390
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
Avatar for wanda ganota
2
210
2025年になってもまだMySQLが好き
Avatar for yoku0825 yoku0825
8
4.7k
Snowflakeの生成AI機能を活用したデータ分析アプリの作成 〜Cortex AnalystとCortex Searchの活用とStreamlitアプリでの利用〜
Avatar for Nayuta S. nayuts
1
470

Featured

See All Featured
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
4k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
6k
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
160
23k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
126
53k
Faster Mobile Websites
Avatar for Dean Hume deanohume
309
31k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.1k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
580

Transcript

  1. None

  2. アジェンダ Splineについて web×3DのUI表現一覧 まとめ 自己紹介 Web上で動作する3Dモデルを Splineというサービスで作って みる Reactで読み込み、実際のWeb ページに表示してみる

    話すこと

  3. 自己紹介 -その1- nisshi.dev | にっし ＠nsd244 「孤独からの解放を目指し、デジタル上に新しい体 験価値をweb×3Dの技術で創造する🔥」をテーマに もの創りしているwebエンジニア サービス開発やOSS活動やコミュニティ運営をして

    いる 「好きで生きる」 「おもしろ駆動開発」

  4. Splineとは Web用に簡単に3DCGを作成することができるサービス（Web・Desktopアプリ対応） 出典：https://spline.design/

  5. Splineとは 基本的にはWeb出力用のサービスのため、Blenderの代わりではない 出典：https://spline.design/

  6. なぜSplineか 公式がReact対応ライブラリを用意してくれてる！簡単！ 出典：https://github.com/splinetool/react-spline

  7. Web×3DのUI表現一覧 -3Dテキスト- https://my.spline.design/web3dslide-72ecdaff609510c9a2ef73bbe637e3b3/ 既存の表現をよりリッチにする アニメーションがあると、ワクワクする表現になる ただ、逆に見にくくなってしまう場面もあるのでここぞというポイントで出すのが大 事

  8. Web×3DのUI表現一覧 -3Dルーム- https://my.spline.design/miniroomcopy-afc3c56277ee1cf31f638fb790c6fee5/ 空間をwebページでよりリッチに再現 もしアニメーションがあれば、商品や利用例などがわかりやすくなる 自己表現がよりカッコよくできる

  9. Web×3DのUI表現一覧 -webページ組み込み- https://deploy-preview-4--nisshi-dev.netlify.app/

  10. まとめ 既存のWebサイトでのUI表現をよりリッチにできる！ ここぞという場面で使うのがおすすめ！ めちゃ簡単にWeb出力ができるSplineはいいぞ 後日、この3D表現を盛り込んだポートフォリオサイトを公 開予定...！！

  11. None